javascript - 列表对象 ID 值与对话框模式属性绑定(bind)

Question

我有以下 ListView

单击拒绝后，我刚刚配置为打开一个模式对话框，如下所示

因此，一旦我提交此模态对话框，我想将模态值提交给方法以将其保存在数据库表中。

这是相关的模型类

    public class ProductViewModel
    {
        public AB_Product Products { get; set; }
        public IEnumerable<AB_Product> LProducts { get; set; }
    }

    public partial class AB_Product
    {
        public string ProductID { get; set; }
        public string ApprovalStatus { get; set; }
        public string ReasonEn { get; set; }
        public string ReasonAr { get; set; }
    }

这是查看页面代码

@model project_name.Models.ProductViewModel

<table class="table">

    <tr>
        <th>
            Name
        </th>
        <th>
            Action
        </th>
    </tr>

    @foreach (var obj in Model.LProducts)
    {
        <tr>
            @Html.HiddenFor(modelItem => obj.ProductID)

            <td>
                @Html.DisplayFor(modelItem => obj.ProductTitleEn)
            </td>

            <td>

                <div class="btn-group btn-group-sm" id="CreateButton">
                    <button type="button" class="btn btn-default" onclick="location.href='@Url.Action("Create")';return false;">View Product</button>
                </div>

                @if (obj.ApprovalStatus == "Pending")
                {
                    <div class="btn-group btn-group-sm" id="ApproveButton">
                        <button type="button" class="btn btn-success" onclick="location.href='@Url.Action("Change_Product_State","Home", new { productid = obj.ProductID, value = "Approved" },null)';return false;">Approve</button>
                    </div>

                    <div class="btn-group btn-group-sm" id="RejectButton">
                        <button type="button" id="modal-opener" class="btn btn-danger" return false;">Reject</button>
                    </div>

                }

                <div class="btn-group btn-group-sm" id="CreateButton">
                    <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create_ProductComments","Home", new { productid = obj.ProductID }, null)';return false;">Add Comments</button>
                </div>

            </td>

        </tr>
    }

</table>


<div id="dialog-modal" title="Basic modal dialog">
    @using (Ajax.BeginForm("Change_Product_State", "Home", new { value = "Rejected" }, new AjaxOptions { UpdateTargetId = "ID", OnSuccess = "onSuccess" }))
    {
        <div>
            <fieldset>
                <legend>Account Information</legend>

                <div class="editor-label">
                    @Html.LabelFor(m => m.Products.ReasonEn)
                </div>

                <div class="editor-field">
                    @Html.TextAreaFor(m => m.Products.ReasonEn)
                    @Html.ValidationMessageFor(m => m.Products.ReasonEn)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(m => m.Products.ReasonAr)
                </div>

                <div class="editor-field">
                    @Html.TextAreaFor(m => m.Products.ReasonAr)
                    @Html.ValidationMessageFor(m => m.Products.ReasonAr)
                </div>

                <p>
                    <input type="submit" value="Submit" />
                </p>

            </fieldset>
        </div>
    }
</div>


@section Scripts
{

<script>
        $(function () {
            $("#dialog-modal").dialog({
                autoOpen: false,
                width: 400,
                height: 400,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });

            $("#modal-opener").click(function () {
                 $("#dialog-modal").dialog("open");
            });
        });

        function onSuccess() {
            $("#dialog-modal").dialog("close");
        }
</script>

}

如何绑定(bind)列表对象，我点击的是ProductID和m.Products.ProductID

Answer 1

从 foreach 循环和 Ajax.BeginForm() 中删除 @Html.HiddenFor(modelItem => obj.ProductID)添加

@Html.HiddenFor(m => m.Products.ProductID)

所以它的值可以被发布。然后将 ProductID 的值添加为按钮的 data- 属性(并将 id 更改为 class - 请参阅下面的注释)

<button type="button" class="modal-opener btn btn-danger" data-id="@obj.ProductID">Reject</button>

并将脚本修改为

$(".modal-opener").click(function () { // use class name
    $('#Products_ProductID').val($(this).attr("data-id")); // set the value of the hidden input
    $("#dialog-modal").dialog("open");
})

请注意，由于 foreach 循环生成重复的 id 属性，您有很多无效的 html。请改用类名。你的 html 应该是

@foreach (var obj in Model.LProducts)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => obj.ProductTitleEn)</td>
        <td>
            <div class="btn-group btn-group-sm CreateButton"> // change
                <button type="button" class="btn btn-default" onclick="location.href='@Url.Action("Create")';return false;">View Product</button>
            </div>
            @if (obj.ApprovalStatus == "Pending")
            {
                <div class="btn-group btn-group-sm ApproveButton"> // change
                    <button type="button" class="btn btn-success" onclick="location.href='@Url.Action("Change_Product_State","Home", new { productid = obj.ProductID, value = "Approved" },null)';return false;">Approve</button>
                </div>
                <div class="btn-group btn-group-sm RejectButton"> // change
                    <button type="button" class="modal-opener btn btn-danger" data-id="@obj.ProductID">Reject</button> // as above
                </div>
            }
            <div class="btn-group btn-group-sm CreateButton"> // change
                <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create_ProductComments","Home", new { productid = obj.ProductID }, null)';return false;">Add Comments</button>
            </div>
        </td>
    </tr>
}