Partial View content is not reloaded

Question

I have a view with a button, when click this button, an ajax function calls controller method ApplicationAndUse which is supposed to pass a list to a partial view included in my view. The partial view content is supposed to be refreshed, but this doesn't work, my partial is still empty. My code :

Main view :

@model List<String>


<div class="row">
<div class="col-md-2">
    @foreach (var item in Model)
    {
        <div id="univers-@item" class="btn btn-info">@item</div><br />
    }
</div>
<div class="col-md-10">
    @Html.Partial("_ApplicationAndUsePartial", null, new ViewDataDictionary())
</div>
</div> 
@section scripts
{
<script type="text/javascript">

    $(function () {

        $('[id^=univers]').click(function () {

            var selectedButton = $(this).attr('id');
            var selectedUniverse = selectedButton.substring(selectedButton.indexOf('-') + 1, selectedButton.lenght);


            $.ajax({
                url: "http://" + window.location.host + "/UseAndNeed/ApplicationAndUse",
                type: "POST",
                data: { idUniverse: selectedUniverse },
                dataType: "json",
            });
        });
    });
</script>
}

Partial view :

@model List<int>

@if (Model!= null) { 
foreach (var item in Model)
{
    <div id="ApplicationUse-@item" class="btn btn-default">@item</div><br />
}
}

Controller function :

[OutputCache(Duration = 0)]
    public ActionResult ApplicationAndUse(String idUniverse)
    {
         List<int> items = new List<int>();
         items.Add(1);
         items.Add(2);
        return PartialView("_ApplicationAndUsePartial", (object)items);
    }

what do i miss?

Answer 1

Give a unique Id to the div where we want to show the partial view content.

<div id="myPartial" class="col-md-10">
    @Html.Partial("_ApplicationAndUsePartial", null, new ViewDataDictionary())
</div>

And in the success handler of the ajax method, update this div's innerHTML with the response coming from the ajax call. Also you do not need to pass specify the dataType value when making the ajax call.

var myUrl= "http://" + window.location.host + "/UseAndNeed/ApplicationAndUse";

$.ajax({  type: "POST",
          url : myUrl,
          data: { idUniverse: selectedUniverse },
          success:function(result){
              $("myPartial").html(result);
          }
       });

Always you should use the Url.Action or Url.RouteUrl html helper methods to build the url to the action methods. It will take care of correctly building the url regardless of your current page/path.

var myUrl= "@Url.Action("ApplicationAndUse","UseAndNeeed")";

This works if your js code is inside the razor view. But If your code is inside a seperate javascript file, you may build the url(s) in your razor view using the above helper methods and keep that in a variable which your external js file code can access. Always make sure to use javascript namespacing when doing so to avoid possible issues with global javascript variables.

@section Scripts
{
 <script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
 </script>
 <script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

}

And in your PageSpecificExternalJsFile.js file, you can read it like.

var myUrl= myApp.Urls.baseUrl+"UseAndNeed/ApplicationAndUse";
$("#myPartial").load(myUrl+'?idUniverse=someValue');