Question

我有一个强类型视图，其中Model表示List中的多个对象。在这个视图中，我生成了Grid，每个对象代表一个网格中的一行。然后我将特定对象从此模型列表传递到局部视图。这个局部视图实际上是一个弹出窗口。在弹出窗口中，我有一个表单，用户可以在其中更正一行（一个对象）并提交回Action，在那里我保存对数据库的更改。当我点击特定的“行”时，如何将特定对象从视图传递到局部视图？

是否可以将特定行的ID保存到隐藏字段，然后在渲染部分视图或将模型传递给局部视图时从隐藏字段动态读取该值？或整个概念是错误的？

查看代码

@model IEnumerable<Loyalty.Models.GridColumns>
@using GridMvc.Html
@using GridMvc.Sorting

<input type="button" id="opener" title="open popup" value="test1"/>
<a onclick="EditUser(1)">edit</a>

@Html.Grid(Model).AutoGenerateColumns()

<div id="EditUser" title="Popravi uporbnika">
    @{
        //Here I would like to get value from hidden field and change it with value 1
        //in a WHERE sentance in the line below
        Html.RenderPartial("EditUser", Model.Where(m => m.ID == 1).Single());
    }
</div>

<script  type="text/javascript">
    $("#opener").click(function () {
        $("#EditUser").dialog("open");
    });
    $(function() {
        $("#EditUser").dialog({
            open: function() {
                $("body").addClass("blur");
            },
            clse: function () {
                $("body").removeClass("blur");
            },
            modal: true,
            closeText:  "Close",
            autoOpen: false,
            width: 800,
            height: 600
        });
    });

    }
</script>

PartialView代码

@model Loyalty.Models.GridColumns

@using (Ajax.BeginForm("UpdateUser", "Home", new AjaxOptions () { UpdateTargetId="ID", OnSuccess="onSuccess()"}))
    {
        <fieldset class="PopUp">
            <legend class="PopUp">General data</legend>
            <div class="EditLabel">
                Name:
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.FirstName)
            </div>

            <div class="EditLabel">
                Last name:
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.LastName)
            </div>

             <div class="EditLabel">
                Birth date: 
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.BirthDate, "{0:dd-MMM-yyyy}")
            </div>

            <div class="EditLabel">
                Gender: 
            </div>
            <div class="EditValue">
                @{
                    var item1 = new SelectListItem();
                    item1.Text = "male";
                    var item2 = new SelectListItem();
                    item2.Text = "female";
                    List<SelectListItem> items = new List<SelectListItem>();
                    items.Add(item1);
                    items.Add(item2);
                    var SelectItems = new SelectList(items, "Value", "Text");
                }

                @Html.DropDownListFor(m => m.Gender, SelectItems)
            </div>
        </fieldset>

        <fieldset class="PopUp">
            <legend class="PopUp">Address</legend>
            <div class="EditLabel">
                Street:
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.Street)
            </div>

            <div class="EditLabel">
                House no.:
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.HouseNumber)
            </div>

            <div class="EditLabel">
                Town:
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.Town)
            </div>

            <div class="EditLabel">
                Post code:
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.PostNumber)
            </div>
        </fieldset>

        <fieldset class="PopUp">
            <legend class="PopUp">Contact info</legend>
            <div class="EditLabel">
                Phone: 
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.PhoneNumber)
            </div>

            <div class="EditLabel">
                E-mail: 
            </div>
            <div class="EditValue">
                @Html.TextBoxFor(m => m.Email)
            </div>
        </fieldset>
    }

主要观点操作

    public ActionResult Index()
            {    
                var UsersCollection = new List<GridColumns>();
                for (int i = 1; i <= 31; i++)
                {
                    bool disc = false;
                    if (i % 2 == 0)
                    {
                        disc = true;
                    }
                    else
                    {
                        disc = false;
                    }

                    UsersCollection.Add(new GridColumns() {ID = i, BirthDate = new DateTime(2014,1,i), Email = "user" + i + "@email.com", FirstName = "User1" + i, LastName = "User1LastName" + i, Gender = "male", Discount = disc, Cupons = i });
                }

                return View(UsersCollection);
            }

部分查看操作

    [HttpPost]
    public ActionResult UpdateUser(GridColumns person)
    {
        return PartialView();
    }

Partial View action is called when submitting popup form.

模型

[GridTable(PagingEnabled=true, PageSize=20)]
    public class GridColumns
    {
        [GridColumn(Title="ID", SortEnabled=true)]
        public int ID { get; set; }

        [GridColumn(Title="First name", FilterEnabled=true, SortEnabled=true)]
        public string FirstName { get; set; }

        [GridColumn(Title = "Last name", FilterEnabled = true, SortEnabled = true)]
        public string LastName { get; set; }

        [GridColumn(Title = "Birth date", FilterEnabled = true, Width = "150", Format = "{0:dd-MMM-yyyy}")]
        public DateTime BirthDate { get; set; }

        [GridColumn(Title = "gender", FilterEnabled = true)]
        public string Gender { get; set; }

        [GridColumn(Title = "e-mail", FilterEnabled = true, SortEnabled = true)]
        public string Email { get; set; }

        [GridColumn(Title = "Phone", FilterEnabled = true, SortEnabled = true)]
        public string PhoneNumber { get; set; }

        [GridColumn(Title = "Street", FilterEnabled = true)]
        public string Street { get; set; }

        [GridColumn(Title = "House no.", FilterEnabled = true)]
        public string HouseNumber { get; set; }

        [GridColumn(Title = "Town", FilterEnabled = true)]
        public string Town { get; set; }

        [GridColumn(Title = "Post number", FilterEnabled = true)]
        public int PostNumber { get; set; }            
    }

Answer 1

我会将javascript函数绑定到网格的行单击事件，并假设网格的键是您要使用的ID：

function showPopup(id){
     var url = 'someActionThatPopulatesPartialView/' + id;
     $.get(url, function(data){
          $('#EditUser').html(data);
     });
}

Answer 2

我并不是说要严厉，但如果您要为网络开发，那么您需要来了解网络的运作方式。在HTTP中，您有一个服务器和一个客户端。客户端向服务器发送请求以获取某些资源，该服务会发送回响应。这称为请求 - 响应周期。 “循环”部分是关键，因为连接不能无限期地保持。服务器发送响应后，连接将关闭，如果客户端需要进一步的操作，则会发出新请求。

所以，现在让我们考虑一下你想要完成的事情。您有一个部分视图，呈现服务器端，并且您希望根据将要发生的事情呈现不同的内容客户端（单击）。那是不可能的。当用户点击某些内容时，服务器已经完成了它的工作并继续前进。

现在，正是由于这种限制，开发了AJAX。 AJAX只是一种在页面上发出HTTP请求的方法，而不必强制浏览器重新加载。您可以将其视为网页内的迷你精简版浏览器。如果您希望基于用户单击呈现某些HTML，则必须使用JavaScript来捕获和处理该单击事件，向服务器发送HTTP请求以获取该位HTML，然后将返回的数据呈现给页面一次你收到了答复。简单地说，这可以通过以下方式实现：

<强>的JavaScript

$('.row').on('click', function () {
    $.get('/url/to/action/that/returns/html', { id = [something] }, function (result) {
        $('#Something').html(result);
    }
});

控制器操作

public ActionResult GetRowHtml(int id)
{
   // whatever
   return View("_RowHtml");
}

部分视图

@{ Layout = null; }
<!-- your html -->

你必须填写的部分是因为我无法为你做出这些假设：

如何在JS中获取行ID。您可以将其作为数据属性添加到表行，然后使用$(this).data('id')检索它。您只需使用$(this).find('td.myIdCell').text()从已知数据单元中提取它即可。您无法将其真正设置为行的实际id属性，因为HTML ID必须以字母字符开头，但您可能会执行id="row1"之类的操作，其中1是id并使用JS字符串操作函数或正则表达式模式将其拉出来。
在您的操作中实际使用的ID。这只是您的直接业务逻辑。
返回的HTML会发生什么。我只是设置了一些ID为#Something的元素的HTML内容。您的逻辑可能会更复杂，可能需要先选择表格或其他内容，然后再将项目附加到DOM。

将特定模型从一个视图传递到局部视图？

2 个答案: