Question

我使用的是标准的MVC4 EF5设置，并且有一个标准视图，可以将数据从数据库加载到表格中。

在表的开头，我有一个列，每个记录都有一个Add按钮。我想要的功能是单击按钮，弹出一个带有表单的模型对话框，并在点击的网格中添加一些内容（1到多个）。

假设我列出了可用的货车清单。当我点击我要添加乘客的特定货车旁边的添加按钮时，我想要一个弹出窗口显示允许我输入乘客的详细信息，以便将它们分配给该货车。

我认为我过于复杂了。但我的大脑是油炸的。我用ajax尝试了部分视图。我试过jQuery UI.Dialog。我刚丢了。我试图弄清楚如何找到我点击的记录的id（假设按钮都是由a为视图中的每个循环生成的正常而且将它们编号为1到X并不告诉我我点击的记录的id ）。因此，即使我看到弹出窗口，我也不会知道将哪个面包车分配给乘客。

如果你的乘客名单来自哪里，那就是另一张桌子。实际上，任何乘客都可以被分配到任何货车。它的假设。

我实际上正在处理文档生成器，因此文档部分和文档之间存在多对多的关系（给定的文档部分，可以出现或属于许多文档，文档可以包含许多文档部分）。我知道它很乱，这就是为什么我不想使用真实的例子。

我认为它可能是一个很容易解决的问题，但我从星期五开始就一直在这里，大脑离开了家！

编辑：添加代码：

以下是主要观点：我遇到的主要问题是网格的构建方式。我认为它部分剃刀，部分HTML，部分HTML帮助程序，部分JavaScript。我不知道哪个部分是哪个，但我只需要为表中的每个按钮显示一个弹出窗口，并且我可以为其分配值。我无法弄清楚如何在这里做到这一点。

Html.Grid(dbaccess().Where(c => something = something
                    ).Select(o => new
                        {
                            Name = o.Name,
                            Comment = o.Comment,
                            Status = o.Status,
                        }

                    , "grdConfiguration", 0, htmlRowClass: (p) => (row++ % 2 != 0) ? "" : "oddRow"
                    , columns: new[]{ 


//THIS IS THE PROBLEM LINE BELOW .... It shows a button in the table, but...
//how do I make it unique. Is it even necessary to do so.
// How do I get the ID of the record at this location when this button is pressed.

//This is the code as originally posted: For context
new Helpers.GridColumn(value: (a) => "<input type=\"button\" class=\"btn\" id=\"BtnHello\" value=\"Add\" />"),

//for some reason when I try the following alternative as suggest by the answers so far - it doesn't work.
new Helpers.GridColumn(value: (a) => "<input type=\"button\" class=\"btn\" data-ThisId=\"@model.SomeId\" value=\"Add\" />"),


//THIS IS THE PROBLEM LINE ABOVE....

     there is more columns but this button calls the jQuery...

在这个视图中我还有一些Div标签，可以在其中加载部分...我实际上可以将其设置为弹出窗口。但这就是我所能做的一切。只有当我点击表格中的第一个按钮时才会这样。

<div id='SomePopUp' style='display: none;'>
    //@using (Html.BeginForm())
    //{
    //    <div>
    //        <span class="display-label">Quantity: </span>
    //        <span class="display-field"><input type="text" id="txtQuantity" /></span>
    //    </div>
    //    <div>
    //        <span class="display-label">Comments: </span>
    //        <span class="display-field"><textarea rows="7"></textarea></span>
    //    </div>
    //}
</div>

我在这个视图上还有一个脚本部分，其中包含弹出窗口的代码：

<script type="text/javascript">
    $("#BtnHello").click(function ()
    {
        $("#SomePopUp").dialog(
            {
                resizable: false,
                height: 400,
                width: 400,
                modal: true,
                title:"add to {Some ID}:", //I want the id to show here so I know I have the record I want.
                buttons:
                    {
                        Submit : function ()
                        {
                            $(this).dialog('Some Text');
                        },
                        Cancel: function ()
                        {
                            $(this).dialog('close');
                        }
                    }
            });
    });
</script>

我有一个控制器：

    [HttpGet]
    public ActionResult AddExtra(int id)
    {
        //Fairly sure I should be doing something with this id, but how do I get it from the button.

        return PartialView();
    }

对于我的部分视图

@model CM.ViewModels.AddExtraPackagesViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Add Something</h3>
</div>
<div>
 //I was using ajax here...
@*@using (Ajax.BeginForm("DoSomething", "Something", FormMethod.Post,
                new AjaxOptions
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "POST",
                    UpdateTargetId = "list-of-something"
                }))
{
    <div class="modal-body">
        @Html.TextBoxFor(x => x.Quantity);
        @Html.TextAreaFor(x => x.Comment);
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" id="submit">Save</button>
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
}
</div>

我也制作了一个小视图模型但是......

 public class AddExtraViewModel
{
    public int Id { get; set; }
    public string Quantity { get; set; }
    public string Comment { get; set; }
}

我道歉，如果到处都是，但我没有写原始代码。在我之前还有大约7位其他程序员，我只是在努力解决这个问题。

任何帮助都将不胜感激。

Answer 1

我想你会想要这样的东西（使用jQuery和jQuery UI）：

控制器：

public ActionResult SomeAction(int id) {
    return View(new YourModel { Id = id });
}

部分视图：

@model YourProject.Models.YourModel

// Partial view content e.g. the form etc.

您的观点：

/<!-- html etc. -->
<table>
    <tr>
        <td><a href="#" class="add-button" data-theId="@theModel.Id">Add</a></td>
    </tr>
</table>

<script>
    $(function(){
        $(".add-button").click(function(){
            var options = {
                autoOpen: false
            }
            var dialog = $("<div>").dialog(options);

            var id = $(this).data("theId");
            dialog.load("the/url/to/the/controller/action", { id: id }, function(){
                dialog.dialog("open");

                dialog.find("form").submit(function(){
                    // do stuff
                    dialog.remove();
                    return false;
                });
            });
        });
    });
</script>

Answer 2

如果你在forloop中构建按钮，你不想在按钮上定义id。视图上的重复ID可能会导致很多问题。使用按钮上的类来触发并在脚本中使用$（this）来获取单击按钮的详细信息。要访问页面加载后添加到页面的部分或项目上的按钮，您需要将该按钮的单击事件绑定到文档，如下所示

$(document).on("click", ".btnDetails", function(){
    //your script here
});

另一个例子使用＆＃34;这个＆＃34;并显示如何将单击按钮的ID传递回控制器。

虽然控制器需要有点不同

public PartialViewResult PopulatePartial(int ID){
    var Model = //populate your model based on the passed id
    return PartialView("PartialViewName", Model);
}

部分视图与ajax和jQuery UI.Dialog

2 个答案: