CODEWITHSUNDEEP
asp.net-mvcpartial-views
Ethel Patrick
Ethel Patrick

Reputation: 975

Passing parameters to Partial Views

I am trying to understand partial views and having a hard time. I have a Controller that has the standard Views associated with it (create, edit, ...) and on these views, with the exception of the Index view I would like to show a record from a different Model(table). Since it would be the same thing and format for all the views I thought I would create a partial view. However I am having a hard time understanding the implementation of the partial view.

For the Edit, Create, Delete, and Details views I am displaying a Device based on a DeviceID passed to the view. I would like to have my partial view show the Device's respective Location based on LocationID.

I have created a _Location partial view with a template of Detail from my Model class of Location. And have tried to pass it the parameter a number of unsuccessful ways.

How do I pass the LocationID to the partial view? Do I put code in the Controller that returns the partial view and the LocationID?

How does the Partial View know that it needs the LocationID? I have looked up tutorials however I am still having a hard time.

Upvotes: 1

Views: 12121

Answers (2)

Zack
Zack

Reputation: 2859

It may be best to create a ViewModel type that can be used with your Edit, Create, Delete, and Details views, that holds all of the information you want to display in your main and partial views. Then you can use Html.Partial like I've done here near the bottom of Details.cshtml to render your partial view with the specified object as its model.

public class Device
{
    public int DeviceID { get; set; }
    public string Name { get; set; }
    public int LocationID { get; set; }
}

public class Location
{
    public int LocationID { get; set; }
    public string Name { get; set; }
    public int DeviceID { get; set; }
}

public class DeviceDetailsViewModel
{
    public Device Device { get; set; }
    public Location Location { get; set; }
}

Details.cshtml

@model TestAspNet.Models.DeviceDetailsViewModel

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <span>Device: @Model.Device.DeviceID</span>
</div>
<div>
    <span>@Model.Device.Name</span>
</div>
<div>
    @Html.Partial("_Location", Model.Location)
</div>

_Location.cshtml

@model TestAspNet.Models.Location

<span class="text-success">@Model.Name</span>

DeviceController Details method

public ActionResult Details()
{
    // Create a new instance of our ViewModel class.
    var vm = new DeviceDetailsViewModel();

    // You would retrieve the Device and Location 
    // objects for the ViewModel object here.
    vm.Device = new Device();
    vm.Device.DeviceID = 1;
    vm.Device.LocationID = 2;
    vm.Device.Name = "Device Name";

    vm.Location = new Location();
    vm.Location.DeviceID = 1;
    vm.Location.LocationID = 2;
    vm.Location.Name = "Location Name";

    // Pass your ViewModel in your return
    // statement to set the model for the view.
    return View(vm);
}

Upvotes: -1

Nir Weber
Nir Weber

Reputation: 181

If your'e rendering on the server side, a view (create.cshtml) would call:

@Html.RenderPartial("_Location", Model)

the RenderPartial has an overload which accept a ViewModel.

If you fetch the partial view from the client side (via ajax for example), the request will hit the action on the controller and you can return the partial:


    if (Request.IsAjaxRequest){
        return Partial("_Location", vm);
    } else {
        return View("_Location", vm):
    }

what would you do if you have to find the 'LocationID' by searching for it in another table by 'DeviceID' in order to pass it to my partial view? here are 3 options:

AJAX Call a js script will call an action on the controller which will fetch the data from the DB/Service and return a partial view (an html piece that you update the DOM with)

Extending the ViewModel you can add a property on the ViewModel which holds the location data. in that way the original request (the one created the full view).

Call the service from the view the partial view can get the locationID as an input parameter (see my answer above) and call your location service/repo. example in _locationPartial.cshtml:


    @model int //locationID
    @{ 
        var repo = new My.App.Services.LocationService(); 
        var location = repo.GetLocation(Model);
    };
    @location.Name

Upvotes: 0

Related Questions