Извлечь модель из PartialView

Question

У меня есть вид с моделью. В этом виде формы. Я отправляю эту форму в action / controller с кодом ниже. Действие, которое я вызываю в сообщении, возвращает частичное представление, это частичное представление строго типизировано. Переменная data ниже получает это частичное представление. Вопрос в том, возможно ли получить доступ к модели, использованной в частичном представлении?

var jqxhr = $.post(....., {
    ....
},
function (data) {
    //(*)
});

Answer 1

К тому времени, когда ваш код JavaScript выполняется, данные, которые он получает, являются ответом сервера, что бы это ни было. Если это частичное представление, то ответ сервера, скорее всего, html, и нет, вы не можете получить доступ к модели, которая использовалась для его построения.

Если все, что вам нужно, это доступ к данным модели из вашего кода javascript, то вы можете попробовать вернуть jsonresult из вашего метода действия.

Если вам требуется частичное представление, но вам также нужен доступ к некоторым данным в модели, то я бы встроил необходимые данные в частичное представление, возможно, используя скрытые поля. Ваш код JavaScript может затем извлечь эти данные из содержимого частичного просмотра.

---

Чтобы уточнить, вы можете использовать jQuery для извлечения информации из известного элемента в ответе сервера. Например, предполагая, что параметр data в примере является строкой следующего HTML:

<tr><td><input id="ID" name="ID" type="hidden" value="1" />1</td><td><input id="Value" name="Value" type="text" value="Data Entity 1" /></td><td><input type="button" value="Update" /></td></tr>

Вы можете извлечь значение из текстового поля «Значение» с помощью следующего JavaScript:

var value = $(data).find("td input[name='Value']").val();

Или вы можете извлечь значение скрытого поля "ID" с помощью следующего JavaScript:

var id = $(data).find("td input[name='ID']").val();

Ниже приведен соответствующий код простой страницы, которую я собрал, чтобы продемонстрировать это:

List.cshtml

@model AjaxTest.Models.ListOfDataEntities

@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>List</h2>

<table id="Items">
    <thead>
        <tr><th>ID</th><th>Value</th><th></th></tr>
    </thead>
    <tbody>
@foreach (var item in Model.DataEntities)
{
    Html.RenderPartial("ListItem", item);
}
    </tbody>
</table>

<script type="text/javascript" language="javascript">
$("table#Items tbody tr td input[value='Edit']").live("click", function () {
    var row = $(this).closest("tr");
    var id = row.find("td input[name='ID']").val();
    var jqxhr = $.post('@Url.Action("EditListItem")', { id: id }, function (data) {
        // here, data is a string of HTML, such as <tr><td><input id="ID" name="ID" type="hidden" value="1" />1</td><td><input id="Value" name="Value" type="text" value="Data Entity 1" /></td><td><input type="button" value="Update" /></td></tr>
        var value = $(data).find("td input[name='Value']").val();
        alert(value);
        row.replaceWith(data);
    });
});
$("table#Items tbody tr td input[value='Update']").live("click", function () {
    var row = $(this).closest("tr");
    var id = row.find("td input[name='ID']").val();
    var value = row.find("td input[name='Value']").val();
    var jqxhr = $.post('@Url.Action("UpdateListItem")', { id: id, value: value }, function (data) {
        row.replaceWith(data);
    });
});
</script>

ListItem.cshtml

@model AjaxTest.Models.MyDataEntity
        <tr><td>@Html.HiddenFor((x) => x.ID)@Model.ID</td><td>@Model.Value</td><td><input type="button" value="Edit" /></td></tr>

EditListItem.cshtml

@model AjaxTest.Models.MyDataEntity
        <tr><td>@Html.HiddenFor((x) => x.ID)@Model.ID</td><td>@Html.TextBoxFor((x) => x.Value)</td><td><input type="button" value="Update" /></td></tr>

HomeController.cs

using System.Collections.Generic;
using System.Web.Mvc;

using AjaxTest.Models;

namespace AjaxTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult List()
        {
            var model = new ListOfDataEntities(new List<MyDataEntity>
            {
                new MyDataEntity { ID = 1, Value = "Data Entity 1" },
                new MyDataEntity { ID = 2, Value = "Data Entity 2" },
                new MyDataEntity { ID = 3, Value = "Data Entity 3" },
                new MyDataEntity { ID = 4, Value = "Data Entity 4" },
                new MyDataEntity { ID = 5, Value = "Data Entity 5" },
            });

            return View(model);
        }

        public PartialViewResult EditListItem(int id)
        {
            // ideally the model would be retrieved from some data source,
            // but this is just a proof of concept
            var model = new MyDataEntity { ID = id, Value = "Data Entity " + id };

            return PartialView(model);
        }

        public PartialViewResult UpdateListItem(MyDataEntity model)
        {
            return PartialView("ListItem", model);
        }
    }
}

MyDataEntity.cs

@model AjaxTest.Models.MyDataEntity
        <tr><td>@Html.HiddenFor((x) => x.ID)@Model.ID</td><td>@Html.TextBoxFor((x) => x.Value)</td><td><input type="button" value="Update" /></td></tr>
namespace AjaxTest.Models
{
    public class MyDataEntity
    {
        public int ID { get; set; }

        public string Value { get; set; }
    }
}

ListOfDataEntities.cs

using System.Collections.Generic;

namespace AjaxTest.Models
{
    public class ListOfDataEntities
    {
        List<MyDataEntity> _DataEntities;

        public ListOfDataEntities(List<MyDataEntity> dataEntities)
        {
            _DataEntities = dataEntities;
        }

        public IEnumerable<MyDataEntity> DataEntities
        {
            get { return _DataEntities; }
        }
    }
}