在ASP.NET MVC C#中使用Jquery更新部分视图

时间:2022-11-30 18:10:50

I am using MVC C# along with Jquery.

我正在使用MVC C#和Jquery。

I have a partial view in a rather large page that has a number of tabs.

我在一个相当大的页面中有一个局部视图,其中包含许多选项卡。

On a click of a checkbox, I like to update the partial view WITHIN the form. What I am getting instead is just the partial view

点击一个复选框,我想更新表格中的局部视图。我得到的只是局部视图

Here is my code in Jquery:

这是我在Jquery中的代码:

   $('#activelist,#inactivelist').change(function () {

        var status = 'inactive';
        window.location.href = '@Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status;

    });

Any idea on how I could update the partial view within a form in terms of how I would make a call to it?

关于如何根据我如何调用它来更新表单中的局部视图的任何想法?

Here is the code for the PartialView

这是PartialView的代码

     return PartialView(Kits);

As mentioned, what I see is just the partial view displayed and not the whole form.

如上所述,我看到的只是显示的部分视图而不是整个表单。

2 个解决方案

#1


28  

window.location.href will reload the entire page. You need to reload some part of your page without a complete reload. We can use jQuery ajax to do this. Let's Find out what jQuery selector you can use to get the Partialview.

window.location.href将重新加载整个页面。您需要重新加载页面的某些部分而不需要完全重新加载。我们可以使用jQuery ajax来做到这一点。让我们看看你可以用什么jQuery选择器来获得Partialview。

For example , Assume your HTML markup is like this in the main form ( view)

例如,假设您的HTML标记在主窗体中是这样的(视图)

<div>
  <p>Some content</p>
  <div id="myPartialViewContainer">
      @Html.Partial("_FeaturedProduct")
  </div>
  <div>Some other content</div>
</div>

And here the DIV with ID myPartialViewContainer is the Container div which holds the content of the partial view.So we will simply reload the content of that div using jQuery load method

这里带有ID myPartialViewContainer的DIV是Container div,它保存了部分视图的内容。所以我们只需使用jQuery加载方法重新加载该div的内容

$(function(){

   $('#activelist,#inactivelist').change(function () {
      var id="someval"; 
      var status = 'inactive';
      $("#myPartialViewContainer").load('@Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status)
  });

});

#2


3  

You are redirecting the user, via the window.location.href property, to the URL of your partial, hence only displaying that partial.

您正在通过window.location.href属性将用户重定向到部分的URL,因此仅显示该部分。

You should instead do an AJAX call to the partial to retrieve it's HTML and then use something like the .append method to add it to whatever container element you want it to be added to.

您应该对partial执行AJAX调用以检索它的HTML,然后使用类似.append方法的内容将其添加到您希望将其添加到的任何容器元素中。

EDIT: The .load() jQuery ajax method is actually better for this specific situation.

编辑:.load()jQuery ajax方法实际上更适合这种特定情况。

#1


28  

window.location.href will reload the entire page. You need to reload some part of your page without a complete reload. We can use jQuery ajax to do this. Let's Find out what jQuery selector you can use to get the Partialview.

window.location.href将重新加载整个页面。您需要重新加载页面的某些部分而不需要完全重新加载。我们可以使用jQuery ajax来做到这一点。让我们看看你可以用什么jQuery选择器来获得Partialview。

For example , Assume your HTML markup is like this in the main form ( view)

例如,假设您的HTML标记在主窗体中是这样的(视图)

<div>
  <p>Some content</p>
  <div id="myPartialViewContainer">
      @Html.Partial("_FeaturedProduct")
  </div>
  <div>Some other content</div>
</div>

And here the DIV with ID myPartialViewContainer is the Container div which holds the content of the partial view.So we will simply reload the content of that div using jQuery load method

这里带有ID myPartialViewContainer的DIV是Container div,它保存了部分视图的内容。所以我们只需使用jQuery加载方法重新加载该div的内容

$(function(){

   $('#activelist,#inactivelist').change(function () {
      var id="someval"; 
      var status = 'inactive';
      $("#myPartialViewContainer").load('@Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status)
  });

});

#2


3  

You are redirecting the user, via the window.location.href property, to the URL of your partial, hence only displaying that partial.

您正在通过window.location.href属性将用户重定向到部分的URL,因此仅显示该部分。

You should instead do an AJAX call to the partial to retrieve it's HTML and then use something like the .append method to add it to whatever container element you want it to be added to.

您应该对partial执行AJAX调用以检索它的HTML,然后使用类似.append方法的内容将其添加到您希望将其添加到的任何容器元素中。

EDIT: The .load() jQuery ajax method is actually better for this specific situation.

编辑:.load()jQuery ajax方法实际上更适合这种特定情况。