0

I want to pass a list of objects to modal popup which is represented as view in a separate .cshtml file

here what I did :

first, I have the following index.cshtml view:

@model E_Voucher.Models.Contract

@{
    ViewBag.Title = "Details";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    Contract @Html.DisplayFor(model => model.ContractId) Details
                </div>
            </div>
            <div class="portlet-body">
                <div class="tabbable-line">
                    <ul class="nav nav-tabs ">
                        <li class="active">
                            <a href="#tab_info" data-toggle="tab"> Info </a>
                        </li>
                        <li>
                            <a href="#tab_project" data-toggle="tab"> Projects </a>
                        </li>
                        <li>
                            <a href="#tab_devices" data-toggle="tab"> Devices </a>
                        </li>
                        <li>
                            <a href="#tab_cards" data-toggle="tab"> Cards </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_info">
                           #1 Tab
                        </div>
                        <div class="tab-pane" id="tab_project">
                           #2 Tab
                        </div>
                        <div class="tab-pane" id="tab_devices">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="actions" style="padding-left:5px">
                                        <a class="btn btn-circle btn-outline red" data-target="#AssignDeviceModal" data-toggle="modal">
                                            <i class="fa fa-plus"></i>&nbsp;
                                            <span class="hidden-sm hidden-xs">Assign Device&nbsp;</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab_cards">
                            #4Tab
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="AssignDeviceModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    @Html.Action("AssignDevice")
                </div>
            </div>
        </div>
    </div>
</div>

the index.cshtml view contains 4 tabs, in the device_tab there is a button which is responsible to show a modal popup contains all the available device to the user, as you can see in the div with id=AssignDeviceModal I put a @Html.Action("AssignDevice") to call the Action Method AssignDevice which fetch the devices from DB, and render the following AssignDevice.cshtml view:

@model IEnumerable<E_Voucher.Models.Device>
<div class="modal-header">
    <h4 class="modal-title">Assign Device</h4>
</div>
<div class="modal-body">
    @*for example print the brand of device*@
    @foreach (var item in Model)
    {
        <li>@item.Brand</li>
    }
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>

and here is the Action Method AssignDevice:

public ActionResult AssignDevice()
        {
            List<Device> _dev = new List<Device>();
            Device dev1 = new Device();
            dev1.Brand = "Samasung";
            _dev.Add(dev1);
            Device dev2 = new Device();
            dev1.Brand = "SONY";
            _dev.Add(dev2);
            return View(_dev);
        }

the problem is, when I click the button, the popup modal is shown and disappeared immediately !

how to fix this ?

Mohamad Ghanem
  • 599
  • 2
  • 8
  • 25

0 Answers0