在MVC中部分加载时如何停止刷新视图？

Question

When I click on Partial View element on tab click like India then the whole view is getting refreshed. I tried using Ajax but control does not even hit there. Where I am doing wrong, can anyone please guide me?

Controller

public ActionResult Index()
{
    ClsHome model = new ClsHome();

    return View(model);
}

public PartialViewResult EmployeeBasedCountry(int CountryId)
{
    ClsHome clshome = new ClsHome();
    clshome.Country = CountryId;

    clshome.countries = CountryFilter(CountryId);          
    return PartialView("~/Views/Home/_pEmp.cshtml", clshome);
}

View

@model EmpWebsite.Models.Home.ClsHome      

<div id=Partial class="col-md-5">                 
   @Html.Partial("_pEmp")
</div>

Partial

@model EmpWebsite.Models.Home.ClsHome  
<ul class="nav nav-tabs nav-justified">
    <li class="active">@Html.ActionLink("India", "EmployeeBasedCountry", "Home", new {@class = "ActionLinkId", @CountryId = "1" },null)
    </li> 
    <li>@Html.ActionLink("USA", "EmployeeBasedCountry", "Home", new {@class = "ActionLinkId", @CountryId = "2" },null)</li>       
</ul>

<div class="tab-content">
    <div class="panel">
        <table class="table-striped">
            <tr class="heading">
                <th>
                    EmpId
                </th>
                <th>
                    EmpName
                </th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @item.EmpId
                    </td>
                    <td>
                        <a>@item.EmpName</a>
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

Script

 $(document).ready(function () {
            $('.ActionLinkId').on("click", function () {
                    debugger;
                    $.ajax({
                       url: '@Url.Action("EmployeeBasedCountry", "Home")',
                        type: "GET",
                        data: { data }
                    })
                        .done(function (partialViewResult) {
                            debugger;
                            $("#Partial").html(partialViewResult);
                        });
                });
            });

Answer 1

You have your parameters around the wrong way for @Html.ActionLink

@Html.ActionLink("USA", "EmployeeBasedCountry", "Home", 
                 new { @class = "ActionLinkId", @CountryId = "2" }, 
                 null)

this overload is: linktext, action, controller, routeValues, htmlAttributes where htmlAttributes is null so your rendered <a> does not have these attributes.

Easy enough to check your rendered html which will be like:

<a href="/Home/EmployeeBasedCountry?class=ActionLinkId&countryId=2">USA</a>

So your link doesn't have the .ActionLinkId class, so the jquery doesn't fire. Also easy enough to check with:

$(function() { alert($(".ActionLinkId").length) }); 

(or use browser debugger earlier )

Fix is to remove the null at the end:

@Html.ActionLink("USA", "EmployeeBasedCountry", "Home", new {@class = "ActionLinkId", @CountryId = "2" })

or split them, depending on the requirement

@Html.ActionLink("USA", "EmployeeBasedCountry", "Home", new { @CountryId = "2" }, new {@class = "ActionLinkId" })

Answer 2

When you're clicking the link, the ajax request sent, but the link do its action, too, and refrsh the page. So, you should prevent the browser from refrsh the page (For more information see MDN Docs ):

$('.ActionLinkId').on("click", function(e) {
  e = e || window.event; // To support old browsers
  e.preventDefault();
  $.ajax({
    url: '@Url.Action("TabLeadingSires", "Home")',
    type: "GET",
    data: { data }
  }).done(function(partialViewResult) {
    $("#Partial").html(partialViewResult);
  });
});

Answer 3

You are using

   @Html.ActionLink("India", "EmployeeBasedCountry", "Home", new {@class = "ActionLinkId", @CountryId = "1" }

which is used to load page... just use class or id parameter to invoke ajax.