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>
<span class="hidden-sm hidden-xs">Assign Device </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 ?