user2320476 user2320476 - 5 months ago 12
Javascript Question

Loading various partial views and passing a parameter to the methods in the controller

I have a page below with buttons and a div pageContent to host my partial views

div id="ProjID">
<div id="pjls">
<label for="SelectProjID">Project:</label>

</div>
</div>

<button class="links" data-url='@Url.Action("link1method","Home")'>Link1</button>
<button class="links" data-url='@Url.Action("link2method","Home")'>Link2</button>
<button class="links" data-url='@Url.Action("link3method","Home")'>Link3</button>


<div id="pageContent"></div>


I have this jquery that is used to load the partial views and their content

$('.links').on('click', function (e) {
e.preventDefault();

var $pageContent = $('#pageContent');
url = $(this).data('url');

$.get(url, function (data) {
$pageContent.replaceWith(data);
});

})


Below is what my controller methods look like

public ActionResult link1method(string sample)
{

return PartialView("_Partial1");
}

public ActionResult link2method(string sample)
{

return PartialView("_Partial2");
}

public ActionResult link3method(string sample)
{

return PartialView("_Partial3");
}


At the moment when you click the Links button, it is only Link1 that loads
the partial view others do not work. when you click on buttons 2 and 3 nothing happens.
What am I doing wrong? I will also like to pass a parameter to each controller method.

Answer

If you click "Link1" first, your replacing <div id="pageContent"></div> with the partial that the method returns so that element no longer exists. If you then click "Link2", var $pageContent = $('#pageContent'); returns undefined so there is nothing to update.

Change the $.get() code to

$.get(url, function (data) {
    $pageContent.html(data); // replaces the inner contents of the element   
})

Side note: Your controller methods have a parameter string sample but you never pass a value for that to the method. You would need to use

$.get(url, { sample: "someValue" }, function (data) {
Comments