CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-partialview
tcode
tcode

Reputation: 5105

MVC Partial View Updated Using Jquery & Ajax - Correct Approach?

I have an MVC 5 web application and I wish to include a partial view within one of the views which is updated using JQuery and Ajax. I have used a bit of JQuery, Ajax and Partial Views before, but never to do a real time update.

I have checked stackoverflow and whilst I can find a lot of posts on this topic, I am still struggling a bit to understand how it might work. If I show you my intended code below it would be great if someone could advice me if I'm on the correct track.

1 - User hits Index method in Controller which get's user details, puts user data into ViewModel and passes ViewModel to View. 

public ActionResult Index(int id)
{
        DashboardViewModel model = new DashboardViewModel();

        User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId()));
        model.SelectedUser = user;

        return View(model);
}

2 - View accepts ViewModel, and also contains Partial View which accepts data from the ViewModel. Partial view then displays the users email address.

View

@model STAR.UI.ViewModels.DashboardViewModel

<div class="row">
    <div class="col-lg-10" id="myPartial">
        @Html.Partial("_UserEmailPartial", Model.SelectedUser)
    </div>
</div>

Partial (_UserEmailPartial)

@model STAR.DomainClasses.User

<h1 class="page-header text-danger">@Model.email</h1>

3 - View also contains drop down list which user can select other users from. 

<select id="UserID" class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
 </select>

When user selects item from drop down list, a JQuery function which contains an AJAX method calls the Index action in the Controller.

$(document).ready(function () {

$("#UserID").change(ChangeEventOfDDL);

function ChangeEventOfDDL() {

    $.ajax({
        type: "GET",
        url: '/Dashboard/Index/',
        data: { id: $(this).val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            $("#myPartial").html(data);
        }
    });
    }

});

4 - The Index method accepts the ID from the drop down list, gets the selected users details, populates the ViewModel and passes to the View.

Next is where I'm not sure. I know I need to pass the data into the DIV "myPartial", but how do I only pass in the data, not the entire View?

Any help would be greatly appreciated.

Thanks.

Upvotes: 0

Views: 1611

Answers (1)

Floremin
Floremin

Reputation: 4089

It would be best to add another action to your controller that would return the partial view:

public ActionResult UserEmail(int id)
{
    User user = _userService.GetUserByID(id);

    return PartialView("_UserEmailPartial", user);
}

Then modify the JS on the client to call this new action:

function ChangeEventOfDDL() {
    $.ajax({
        type: "GET",
        url: '/Dashboard/UserEmail/',
        data: { id: $(this).val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            $("#myPartial").html(data);
        }
    });
}

Upvotes: 1

Related Questions