MVC User Control

MVC VERSON OF A USER CONTROL USING RAZOR and Shared View

This post will take you througth creating a what was called a User Control in ASP.net to what you might use instead in a MVC application.

Lets start with a simple select box that you want to use on a few pages in your application.

 

 <select class='ddlc'  name='listItems' >
<option value='1' Selected = 'selected' >Full Site 01</option>
<option value='1/1'>Satellite 001</option>
<option value='1/3'>Satellite 002</option>
<option value='2'>Full Site 02</option>
<option value='2/7'>Satellite 001</option>
</select>

This is a simple select box that will drop down and allow the user to select an item.

Step1

Create a view in the "View/Shared" folder of your application. I named this one _IndexSites.cshtml

In order for your select list to be used you have to add additional code to post it back to your application. I also wanted to use the selection change in jquery to handle to change in that selection. here is the code.
 
"~/Views/Shared/_IndexSites.cshtml

Because I am passing the string of the select box I am using a string in this case. The JQuery is used to detect a change in the select list and call the controller action in the post to "Mycontroler/MyAction. There you can use the FormCollection to get the selected item.

Step2

You have to have a controller that will handle the selection of the select list
MyControler/Myaction. This can be it's own or any controller. The controller will only affect the PartialView which is the control you are using.

 [HttpPost]
public ActionResult Myaction(FormCollection collection)
{
    //Do something with the selection of the DDL
    return(PartialView("~/Views/Shared/_IndexSites.cshtml"); }

 Step 3

Now in every controller that you want to place the control you have to load the control with the necessary info For example. So this action needs to be in that controller.

One of my controllers is named "Home" so one of my actions is

public ActionResult InitSiteSelect()
{
     Viewbag.Select = //select drop down string..
      return(PartialView("~/Views/Shared/_IndexSites.cshtml");
}

Step 4

In the home viewer " Home/Index.cshtml" I can place my control anywhere I want by using the code below. This is the code that will go in the view that you want to use the controller in. The "InitSiteSelection" which is the name I gave to the action is called in that controller which fills the view's data.

 @{ Html.RenderAction("InitSiteSelect"); }

The "InitsiteSelect" will call my current controller action which will load my control.

To Sum It Up!

Create a view in the "View/Shared" folder of what you want to do. The view has to be in that folder so that it can be seen by any controller in the application. That view also needs to be a PartialView.
There needs to be a controller for that view to process any info that view my have and the view "Post" to that controller.You need to have the @Html.RenderAction("Controller Action") in the controller that the view will show up in and to load the page.


That's It!!!!