Mvc-razor Distribution View

What is a distribution view?

The partial view of the MVC era, the corresponding ascx partial control of the Web Form era. Of course, MVC has more control over the distributed view.

What are the advantages of the distribution view?

1, the distribution view can make the system plug-in (each function module is independent, reduce development, increase reuse).

2. Division of labor (adapting to group development).

3. Simple implementation.

the implementation of the distributed view?

Principle: We all know that MVC is mapped by the action method to the view, and the action method can return the distribution view in Partialviewresult way through the Particalview method.

Typically used in Ajax to request part of the code.

Specific Dome:

First, create a controller in the MVC4: HomeController:

1. Load the distribution view

We modify the code in the controller to:

HomeController:

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" > Public      actionresult Index ()        {            return View ();        }        <summary>///        load the distribution view's action method///</summary>//        <returns></returns> Public        ActionResult Loginpart ()        {            return View ();            The template page that loads the distribution view does not run in the distribution view        }</span>

Add Views: Index and Loginpart, where Loginpart is selected as the distribution view.

The index view modifies the code:

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >index:@{viewbag.title = "Index";}        @section scripts{<script type= "Text/javascript" > var a = "123456";  Window.onload = function () {document.getElementById ("Btnloadpart"). onclick = function () {var                XHR = new XMLHttpRequest ();                Xhr.open ("Get", "/home/loginpart", true);                Xhr.setrequestheader ("If-modified-since", 0);                        Xhr.onreadystatechange = function () {if (xhr.readystate = = 4 && xhr.status = = 200) {                        var htmlnew = Xhr.responsetext;                    document.getElementById ("Divcon"). InnerHTML = Htmlnew;                }                };            Xhr.send (NULL);        };    }; </script>}<input type= "button" value= "Request distribution View" id= "Btnloadpart"/><div id= "Divcon" ></div> 

2, whether it is a distribution view or normal view to load the _viewstart view First

Note: In fact, all views (whether or not distributed views), if not specified, load the _viewstart view first, and the view layout takes the shared folder _layout view. Therefore, if we edit in the shared folder _layout view, all the views will be changed accordingly.

We edit the _viewstart view:

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" >@{    Layout = "~/views/shared/_layout.cshtml";} I ha ha ~~~~</span>

At run time, click Request Distribution view to appear in this interface:




We can see that there are two "I hahaha ~ ~ ~" In the picture, because not only the index view will load the _viewstart view, but also the distribution view Loginpart will load the _viewstart view, so it will be loaded two times.

We know that the distribution view can be loaded into the main view as part of the views, so how do you write the code?
To add code in the index.cshtml code:
<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" ><divid= "DivCon2" >   @{html.renderpartial ("~/views/home/loginpart.cshtml");}    @* loading the index view, the above Ajax code is loaded *@</div></span>

Effect:


OK, this code can be implemented when the main view is loaded when the distribution views are loaded.

3. If the parameters are passed to the distribution view? 

Modify the Loginpart function in HomeController:

<span style= "FONT-FAMILY:KAITI_GB2312;FONT-SIZE:18PX;" > Public        actionresult loginpart ()        {           //viewdata["boyfriend"] = "Xiao Yong ~~~~~" + viewdata["a"];            viewdata["Boyfriend"] = "Xiao Yong ~~~~~";            return Partialview ();            return View ();            The template page that loads the distribution view does not run in the distribution view        }</span>

We pass a value of viewdata["boyfriend" to the view, and we make the request from index, the effect is this:


4. The call relationship in a graph reaction view:

As we wish, the values are passed over and we draw this call graph:


A picture is very clear, at the same time, it is important to note that if the distribution view is loaded from index, if the ViewData defined in the INDEX function in the controller, the distribution view is not able to obtain this value, but is defined by TempData, the distribution view is obtained.

Summary:

Most of the projects we are doing together, so it is unavoidable to use the distribution view, the distribution view embodies: Piecemeal, team work ideas.










Mvc-razor Distribution View