从 View MVC 中获取 Model 对象答案

【问题标题】：Get Model object from View MVC从 View MVC 中获取 Model 对象
【发布时间】：2014-08-26 13:34:44
【问题描述】：

我有这个控制器

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 也是如此
我需要在部分视图中访问传递给索引视图的相同“来宾”对象。

这是我的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 访问“模型”对象。当我在调试器中运行它时，它显示对象未定义。
请帮助。

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

编辑：

Guest.cs

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

【问题讨论】：

标签： jquery asp.net-mvc visual-studio-2012

【解决方案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');
            }

        });

    });

【讨论】：

我有一个查询，我一直在尝试在我的大型项目中做同样的事情，但它找不到MyFunc() 方法。当代码很简单时工作正常。可能是什么问题？
您的控制器在较大项目中的名称是什么？您需要更改 url 以匹配控制器的名称。 'public class MyNameController : Controller { public ActionResult MyFunc(Guest guest)' 将使用 'url: "/MyName/MyFunc",'
我的控制器的名称是HomePROJController。是的，当我之前使用您的代码时，我调整了.js 中的网址，但它不起作用。从那以后我一直在努力解决它，还在努力。
试用网址：'/HomePROJ/MyFunc'
是的，马丁，我在使用您的代码时进行了编辑，但它不起作用。此外，我将函数分为[HttpGet] 和[HttpPost]，GET 请求只有在输入 url 时才有效，所以我认为 url 不是问题。

【解决方案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 项目“基本”模板时，会自动包含此 .js 文件。如果您没有使用此模板，您可以从 Nuget 库中下载它，或者只需 google 并找到它并将其包含在您的项目中。并了解“jquery.min.js”和“jquery.unobtrusive-ajax.js”是两个不同的文件。我希望这会有所帮助。

【讨论】：

我一直在尝试调整您的答案，但似乎无法使其发挥作用。你能尝试运行一次吗？
@Adze，您能否编辑您的问题并添加 Guest 对象的定义？
它将我重定向到部分视图而不是更新元素。您所指的脚本<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 必须在您的PC 上，对吗？那我怎么能包括它，因为你已经给出了本地参考。我目前正在使用<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>这个脚本，它来自谷歌的CDN
好吧，我照你说的做了。现在，当我单击提交按钮时，它会将我重定向到部分视图，而不是更新 div。
@Adze，如果您：1) 没有包含在您的视图中，或者在您的 Ajax.BeginForm() 辅助方法之后包含它。因此，请确保在 Ajax.BeginForm() 之前包含 .js 文件。 2）您没有在 Web.config 文件中添加和。 3) Javascript 在您的浏览器中被禁用。