MVC 4 查看数据更改的重新加载

本文关键字：新加载 加载 数据 MVC | 更新日期: 2023-09-27 18:31:20

>我有一个简单的控制器和视图：

我只想用新数据重新加载Index.cshtml视图页面。我已经彻底调试了代码。事实上，当控件转到 Index(string value) 方法时单击"ul"，模型对象填充了新数据，甚至在 cshtml 页面中，模型也在调试器中显示新列表，但视图没有刷新。我真的不知道为什么..谁能帮我？ 如果我在某处出了严重的错误，请原谅我的无知，因为我是 MVC 的新手。提前感谢...控制器：

namespace MVCTestApp1.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/
        public ActionResult Index()
        {
            ModelState.Clear();
            List<string> ll = new List<string>();
            ll.Add("qq");
            ll.Add("aa");
            ll.Add("zz");
            return View(ll);
        }
        [HttpPost]
        public ActionResult Index(string value)
        {
            ModelState.Clear();
            List<string> ll = new List<string>();
            ll.Add("kkk");
            ll.Add("qq");
            ll.Add("aa");
            ll.Add("zz");
            return View(ll);
        }    
    }
}
View:

@model IEnumerable<string>
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <h2>Index</h2>
    <ul id="bb">
        @foreach (var i in Model)
        {
           <li>@Html.DisplayFor(ir=>i)</li>
        }
    </ul>
}

MVC 4 查看数据更改的重新加载

我想你写了一些javascript代码，以便当用户单击<ul>的<li>元素时，你正在触发对[HttpPost]操作的AJAX调用，将所选值发送到服务器。代码的问题可能是您可能忘记使用success回调中的新内容更新 DOM。因此，要使其正常工作，您可以首先将<ul>内容放在部分视图中：

List.cshtml ：

@model IEnumerable<string>
@foreach (var i in Model)
{
   <li>@Html.DisplayFor(ir=>i)</li>
}

然后将此部分包含在主视图中：

@model IEnumerable<string>
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm()) 
{
    @Html.ValidationSummary(true)
    <h2>Index</h2>
    <ul id="bb">
        @Html.Partial("_List", Model)
    </ul>
}

好的，现在在您的 POST 操作中，您可以返回部分：

[HttpPost]
public ActionResult Index(string value)
{
    List<string> ll = new List<string>();
    ll.Add("kkk");
    ll.Add("qq");
    ll.Add("aa");
    ll.Add("zz");
    return PartialView("_List", ll);
}

最后一点是JavaScript代码：

$(function() {
    $('#bb').on('click', 'li', function() {
        var value = $(this).html();
        $.ajax({
            url: $(this).closest('form').attr('action'),
            type: 'POST',
            data: { value: value },
            success: function(partialView) {
                $('#bb').html(partialView);
            }
        });
    });
});
相关文章：