Question

我有这个控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        Guest guest = new Guest;
        //add some values to guest object
        return View();
    }

    public ActionResult MyFunc(Guest guest)
    {
        return PartialView("Partial1", guest);
    }
}

Partial1.cshtml是强类型的局部视图，Index.cshtml是我需要访问在局部视图中传递给索引视图的相同“guest”对象。

以下是Index.cshtml视图的显示方式：

@model MyProject.Models.Guest
<head>
    <title></title>
    <script src="~/myjquery.js"></script>
<body>
    <p> Some Text </p>
    <div id="mydiv" data-model="@Model"></div>
</body>

myjquery.js的内容

$(document).ready(function(){
    var url = "/Home/MyFunc";
    var model = $("#mydiv").attr("data-model");

    $("#mydiv").load(url, model, function(response, status, xhr){
        if(status != "success"){
            $("#mydiv").html('Failed to load more content');
        }
    });
});

Partial1.cshtml的内容

<p> Some Text from Partial </p>

现在，我无法从js访问'model'对象。当我在调试器中运行它时，它显示了未定义的对象。
请帮助。

我正在使用VS2012，Razor视图引擎和MVC4

编辑：

Guest.cs

public class Guest
{
    public string Fname { get; set; }
    public string Lname { get; set; }
    public int age { get; set; }
}

Answer 1

首先，您需要将访客对象传递给您的视图

public class HomeController : Controller
{
    public ActionResult Index()
    {
        Guest guest = new Guest();
        //add some values to guest object
        return View(guest );
    }

    public ActionResult MyFunc(Guest guest)
    {
        return PartialView("Partial1", guest);
    }
}

为了让jquery理解你的访客对象，你需要将它转换为JSON：

<div id="mydiv" data-model="@Json.Encode(@Model)"></div>

以下脚本将发送guest对象并获取PartialView结果

$(document).ready(function () {
        var url = "/Home/MyFunc";
        var model = $("#mydiv").attr("data-model");


        $.ajax({
            type: 'POST',
            url: '/Home/MyFunc',
            data: model,
            contentType: 'application/json; charset=utf-8',
            cache: false,  
            success: function(data, status, settings)  
            {
                $("#mydiv").html(data);
            },
            error: function (ajaxrequest, ajaxOptions, thrownError) {

                $("#mydiv").html('Failed to load more content');
            }

        });

    });

Answer 2

编辑：我已将 Guest 模型定义如下：

 public class Guest
 {
    public int Id { get; set; }
    public string Name { get; set; }
    public string UserName { get; set; }
 }

然后创建了这个动作方法：

public ActionResult Index()
    {
        Guest guest = new Guest();
        return View(guest);
    }

    public ActionResult MyFunc(Guest guest)
    {
        return PartialView("_Partial1", guest);
    }

然后您的 Index.chtml 将如下所示：

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> //it is better to add it in <head> of your Master Page (_Layout.chtml).

@model YourProject.Models.Guest


<p>Some Text </p>
<div id="mydiv"></div>
@using (Ajax.BeginForm(new AjaxOptions
{                                
    HttpMethod = "POST",                                
    UpdateTargetId = "mydiv",                                  
    Url = Url.Action("MyFunc")
}))
{
    @Html.TextBoxFor(x => x.Id); 
    @Html.TextBoxFor(x => x.Name);
    @Html.TextBoxFor(x => x.UserName);   
    <input type="submit"/>   
}

您的 _Partial1.chtml ：

@model YourProject.Models.Guest

<p> Some Text from Partial </p>

@Model.Name
<br/>
@Model.Id 
<br/>
@Model.UserName

不要忘记包含

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"
    type="text/javascript"></script>

要使其工作还需要在 Web.config 文件中添加

`<add key="UnobtrusiveJavaScriptEnabled" value="true" />` between `<appSettings>` property.

是的，我给了你我对unobrtusive.ajax-min.js的本地参考。在Scripts文件夹中创建ASP.NET MVC项目“Basic”模板时，会自动包含此.js文件。如果你没有使用这个模板，你可以从 Nuget 库下载它，或者只是google它并找到它并将其包含在你的项目中。并了解'jquery.min.js'和'jquery.unobtrusive-ajax.js'是两个不同的文件。我希望这会有所帮助。

从View MVC获取Model对象

2 个答案: