使用Jquery、MVC和Json更新多个部分视图不起作用

update the multiple partial view using Jquery , MVC and Json not working

本文关键字：个部 视图 不起作用 更新 Json Jquery MVC 使用      更新时间：2023-09-26

我正在尝试使用Jquery、MVC和Json更新多部分视图。我的部分视图没有更新

这是我的代码我的视图代码是

@model DropdownGrid.Models.MyMultipleUpdateViewModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript">
    function _Complete(data) {
        var JsonObj = $.parseJSON(data.responseText);
        alert(JsonObj);
        alert(JsonObj.myTest1ViewModel.MyTestUpdate)
        alert(JsonObj.myTest2ViewModel.MyTestUpdate)
        $("#Div1").html(JsonObj);
        $("#Div2").html(JsonObj);
    }
</script>
<br>
<br>
<br>
<br>
<fieldset>
    <div id="Div1">
        @{ Html.RenderPartial("_MyTest1PartialView", Model); }
    </div>
    <div id="Div2">
        @{ Html.RenderPartial("_MyTest2PartialView", Model); }
    </div>
    
</fieldset>
<fieldset>
    @using (Ajax.BeginForm("CreateStudent", "GetStudents",
        new AjaxOptions { HttpMethod = "Post",  OnComplete = "_Complete" }))
    {
        <input type="submit" value="Submit" />
    }
</fieldset>

我的控制器代码是

enter code here
    public class GetStudentsController : Controller
{
    public ActionResult Index()
    {
        MyMultipleUpdateViewModel obj = new MyMultipleUpdateViewModel();
        obj.myTest1ViewModel = new MyTest1ViewModel();
        obj.myTest1ViewModel.MyTestUpdate = "Test1";
        obj.myTest2ViewModel = new MyTest2ViewModel();
        obj.myTest2ViewModel.MyTestUpdate = "Test2";
        return View(obj);
    }

    [HttpPost]
    public ActionResult CreateStudent(MyMultipleUpdateViewModel objuserloginmodel)
    {
        MyMultipleUpdateViewModel obj = new MyMultipleUpdateViewModel();
        obj.myTest1ViewModel = new MyTest1ViewModel();
        obj.myTest1ViewModel.MyTestUpdate = "Test1"+DateTime.Now.ToString();
        obj.myTest2ViewModel = new MyTest2ViewModel();
        obj.myTest2ViewModel.MyTestUpdate = "Test2" + DateTime.Now.ToString();
        return Json(obj, JsonRequestBehavior.AllowGet);
    }
}

我的视图模型是

public class MyTest1ViewModel
{
    public string MyTestUpdate;
}
public class MyTest2ViewModel
{
    public string MyTestUpdate;
}

public class MyMultipleUpdateViewModel
{
    public MyTest1ViewModel myTest1ViewModel;
    public MyTest2ViewModel myTest2ViewModel;
}

它不起作用你能帮我解决一下我的问题吗。

从Action方法返回一个JSON结构，如下

{
    "myTest1ViewModel": {
        "MyTestUpdate": "Test112/12/2015 5:04:57 PM"
    },
    "myTest2ViewModel": {
        "MyTestUpdate": "Test212/12/2015 5:04:57 PM"
    }
}

但是在您的代码中，您试图将json对象传递给html方法。理想情况下，应该将一些html标记传递给html方法。由于您有一个Json对象，您应该读取Json对象的属性，并显式设置每个元素标记，前提是您的部分视图具有具有唯一id的项。

假设你的局部视图看起来像这个

@model MyMultipleUpdateViewModel
<div id="testUpdate">@Model.myTest1ViewModel.MyTestUpdate </div>

在javascript方法中，您可以在div上设置标记。

function _Complete(data) {
  var JsonObj = $.parseJSON(data.responseText);
  $("#testUpdate").html(JsonObj.myTest1ViewModel.MyTestUpdate);
  // You may set other properties as well.     
}
相关文章：