List object ID value bind with dialog modal property

Question

I have following list view

Once I click Reject I just configured to open a modal dialog like following

So Once I submit this modal dialog I want to submit modal values to method to save that in database table.

this is relevant model classes

    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; }
    }

this is view page code

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

}

how to bind list object I click which is ProductID with m.Products.ProductID

Do you mean you want to pass the `ProductID` to the modal so that it can be posted when you submit the form? — , Jan 29 '16 at 07:28
Will add answer shortly (you have got a lot of invalid html which also needs to be fixed) — , Jan 29 '16 at 07:30

score 2 · Accepted Answer · edited Jan 29 '16 at 10:59

2

Remove the @Html.HiddenFor(modelItem => obj.ProductID) from the foreach loop and inside the Ajax.BeginForm() add

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

so its value can be posted. Then add the value of the ProductID as a data- attribute of the button (and change the id to class - see notes below)

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

and modify the script to

$(".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");
})

Note that you have a lot of invalid html due to duplicate id attributes generated by your foreach loop. Use class names instead. Your html should be

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

edited Jan 29 '16 at 10:59

kez

2,273
9
64
123

answered Jan 29 '16 at 07:43

can there be two classes in `button` ? in your answer there are two classes – kez Jan 29 '16 at 07:54
Oops - no there can't - will update the answer (but what is the purpose of the (previous) `id` attributes anyway? – Jan 29 '16 at 07:55
`ProductID` need to save these reason values in another table , another question , why I go with `class` click instead `ID` click ? – kez Jan 29 '16 at 07:59
`$(".modal-opener").click` instead `$("#modal-opener").click` ? – kez Jan 29 '16 at 08:00
Because its invalid html to have duplicate `id` attributes (and in many cases will result in any javascript/jquery that refers to the `id` to fail). And yes, it needs to be `$(".modal-opener").click(...` – Jan 29 '16 at 08:02
okay thats better to keep it mind to refer `class` instead `id` thanks lot – kez Jan 29 '16 at 08:06
if `ProductID` is `04` but once it in model I can see the value as `4` not as `04` whats the reason for this ? – kez Jan 29 '16 at 08:11
Strange - when you look at the html generated for the Reject button - is it `data-id="04"` or `data-id="4"`? – Jan 29 '16 at 08:13
I can see here `obj.ProductID = 04` – kez Jan 29 '16 at 08:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101974/discussion-between-stephen-muecke-and-kez). – Jan 29 '16 at 08:18
I able to get the actual value using `$('#Products_ProductID').val($(this).attr("data-id"));` , so thanks lot – kez Jan 29 '16 at 10:02
`.val($(this).attr("data-id"));` is identical to `.val($(this).data('id')` and they both return exactly the same value (but using `data()` is the correct approach). I can only assume you must have had a typo – Jan 29 '16 at 10:07
I found that answer in [this question's answer](http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) here it has simmilar solution as you mentioned , which is `$('#Products_ProductID').val($(this).data("id"));` but then I cannot get the exact value, its only working with `$('#Products_ProductID').val($(this).attr("data-id"));` – kez Jan 29 '16 at 10:12
Are you seriously using a version that is less than 1.4.3? (this is the 21st century) UPGRADE! – Jan 29 '16 at 10:16

List object ID value bind with dialog modal property

1 Answers1