Javascript 使用ajax和jQueryUI.Dialog的局部视图

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

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

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

我想我把事情复杂化了。但是我的大脑被炸了。我用ajax尝试了部分视图。我试过jqueryui.Dialog。我只是迷路了。我试图找出如何找到我单击的记录的id（假设按钮都是由视图中的for each循环正常生成的，并且将它们编号为1到X并不表示我单击的记录的id）。因此，即使我看到弹出窗口，我也不知道该将乘客分配到哪辆货车

如果你想知道乘客名单是从哪里来的，那就另当别论了。实际上，任何乘客都可以被分配到任何面包车上。这是假设

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

我在想这可能是一个很容易解决的问题，但我从周五开始就一直在做这件事，而大脑却离开了家

编辑：添加代码：

这里是主要观点：我的主要问题是网格的构造方式。我认为它部分是razor，部分是html，部分是html助手，部分是javascript。我不知道哪个部分是哪个，但我只需要得到一个弹出窗口来显示表中的每个按钮，并有一个id，我可以分配值。我想不出在这里怎么做

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...

至于我的部分观点

@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>

我道歉，如果这是所有的地方，但我没有写原始代码。在我之前，这里还有大约7位程序员，我只是在努力度过难关

---

如果您有任何帮助，我们将不胜感激。

我想您可能需要这样的帮助（使用jQuery和jQuery UI）：

控制器：

    [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();
    }

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>

/
$（函数（）{
$（“.add按钮”）。单击（函数（）{
变量选项={
自动打开：错误
}
变量对话框=$（“”）。对话框（选项）；
var id=$（this.data（“theId”）；
load（“the/url/to/the/controller/action”，{id:id}，function（）{
dialog.dialog（“打开”）；
dialog.find（“form”）.submit（函数（）{
//做事
dialog.remove（）；
返回false；
});
});
});
});

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

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

另一个示例使用“this”并显示如何将单击按钮的id传递回控制器。不过，控制器需要有点不同

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

---

我知道我的示例代码在您回答时还没有更新。但是你能再帮我一点吗。特别是，显示带有表代码的主视图的第一段代码部分是使用javascript完成的，部分是其他一些代码。我想像你一样制作按钮ID，我如何用我的代码来实现这一点。我提到的代码是。。。。新的Helpers.GridColumn（值：（a）=>“”），这将不起作用，因为您试图在C#中获取模型id，其中@表示Razor语法（在视图上下文中，您可以访问模型）您使用的是什么网格插件以及如何在视图中显示它？有一个grid.Column html帮助程序，它使用一组字符串来形成网格。这些字符串是html/razor/c#/javascript组合的神奇命令。然后将帮助程序的“集合”加载到html帮助程序中，以构建一个表，该表中传递了一组其他字符串，以便进行过滤、排序、汇总和常规配置等。其中一半是javascript，一半是C#。它在使用引导的某个点输出html。建造它的人都是天才，但显然我作为维护者不是。但是说这句话，我不想让他们建造我的火箭飞船在控制器代码上，您不会显示填充模型并将其发送到分部代码。你会以一个空白的部分结束吗？你在这里试图解决的问题是什么？现在我试图解决的问题是如何将我填写的内容放入弹出窗口（我可以得到）以与我单击的记录关联。假设我单击第一条记录，它的ID为21，我无法在弹出窗口中获取此ID。我也不能让任何其他按钮工作。有一个按钮列表，但只有第一个按钮起作用，因为我硬编码了id。因为网格的编程方式，我不知道如何将id传递到弹出窗口，以便我可以在那里使用它，并将我的弹出数据保存并分配到我单击的记录。我要感谢那些花时间尝试回答问题的人。然而，我不能再花更多的时间来修复它了，因为老板已经授权我在接下来的一两天内移除所有的垃圾并对其进行重构/重新设计。不过再次感谢你的帮助。听起来不错……我也有同样的感受

/<!-- 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>

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

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