Develop Reference

Display a modal popup div from controller

Can please someone help me here?! Thank you!
I have a view that displays a list of products along with an "Add Product" button for each. I am calling the CreateNewProduct method for each "Add Product" click to find the status of the product. Depending on the status, either I need to stay on the same view or I need to call a modal popup. I am able to do this by creating a modal popup in a different view. But I want to call the modal popup div (also pass the modal) from the same view where it displays a list of products. Is this possible?
public ActionResult CreateNewProduct(int productId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return View("ModalView", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
Model View Code
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Shared Product</h4>
</div>
<div class="modal-body">
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
#foreach (var productTemplate in Model.SharedProduct )
{
<div class="d-flex flex-row">
<div class="p-2">#productTemplate.ProductId</div>
<div class="p-2">#productTemplate.ProductType</div>
<div class="p-2">#productTemplate.StatusCode</div>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
#Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
#Html.ActionLink("Back to List", "Index")
</p>
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
UPDATE:
I made it working. This is what I did. At the end, I have mentioned issues I am facing.
Link, modal and script in my main view - Detail View (called from ProductTemplate Controller)
<td>Add New Product</td>
<div class="modal fade" id="mymodel" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Shared Products</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="mymodelbody">
</div>
</div>
</div>
<script>
var loadModal = function (productId, customerId) {
$.ajax({
type: 'GET',
url: '/NewProductTemplate/CreateNewProduct',
cache: false,
data: {
productId: productId,
customerId: customerId
},
dataType: 'html',
success: function (data) {;
$("#mymodelbody").html(data);
$("#mymodel").modal("show");
}
});
}
</script>
NewProductTemplateController Code
public ActionResult CreateNewProduct(Guid productId, Guid customerId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return PartialView("_shared", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
Partial view _shared.view code
#model SharedModel
#using (Html.BeginForm("ShareProduct", "NewProductTemplate", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
#for (var i = 0; i < Model.SharedProducts.Count(); i++)
{
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductId)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).CustomerId)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductType)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).StatusCode)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).IsShared)
<div class="d-flex flex-row">
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductId)</div>
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductType)</div>
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).StatusCode)</div>
#if (Model.SharedProducts.ElementAt(i).StatusCode == VersionStatus.PUBLISHED)
{
<div class="p-2">#Html.EditorFor(m => m.SharedProducts.ElementAt(i).IsShared)</div>
}
</div>
}
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-primary" />
<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
PROBLEM:
1) When I save submit button in modal pop-up (partial view), it calls ShareProduct method from NewProductTemplate controller. For some reason, model SharedModel's SharedProducts property is null when it gets to controller code. Can you please help me here why it gets null?
public ActionResult ShareProduct (SharedModel shareModel)
{
//Access ShareProducts from shareModel
return RedirectToAction("Details", "ProductTemplate");
}
PROBLEM:
2) I want to load popup only if the product is shared, otherwise I just want to redirect to Detail view as mentioned in NewProductTemplate controller's CreateNewProduct method. Problem is that it loads Detail view also in popup if product is not shared since that's what my script is doing. Is there any way that I can check data in Success function before showing modal popup? If data/html contains Shared text, I would like to load the normal Detail view. I am just assuming. I tried to do so but with no success.
Detail method in ProductTemplate Controller
public ActionResult Details()
{
var productTemplate = _productTemplateService.GetAllProducts(User);
return View(new DetailsModel
{
ProductTemplate = productTemplate,
});
}

(This is for Bootstrap 3.3.7 Hopefully it's relevant for the version you're on)
I handle this by popping open the modal on the client side from my main view. The link that pops the modal contains the URL to the controller method that will render the actual contents (list of products, in your case). This controller method should return a partial view.
Modal in my main view:
<div class="modal fade name-of-my-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
Link in my main view:
<a class="btn btn-default btn-xs" data-toggle="modal" data-target=".name-of-my-modal" role="button" href="/SomeController/SomeMethodThatReturnsPartialView/234">Show Modal</a>
My controller method for the partial view:
public ActionResult SomeMethodThatReturnsPartialView(int id)
{
var model = GetProducts();
return PartialView("_IndexPartial", model);
}
My partial view that will populate the actual modal contents:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Title goes here</h4>
</div>
<form class="form-horizontal" id="SomeId" name="SomeName" role="form">
<div class="modal-body">
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>Product 4</div>
</div>
</form>
Also, if the contents of the modal change frequently, or are variable based upon the ID you pass to the partial controller method, then you'll want to clear the modal contents when closing it. From your main view:
$(document).on('hidden.bs.modal', '.modal', function (e) {
// Handles the event thrown when a modal is hidden
$(this).removeData('bs.modal');
$(this).find(".modal-content").empty();
});
Let me know if this helps, and whether anything needs to be clarified.

Problem 2 you could return a JSON result and put the HTML in a string as shown here:
https://www.codemag.com/article/1312081/Rendering-ASP.NET-MVC-Razor-Views-to-String
you could also set a boolean on the returned JSON for whether to redirect.
If it is a redirect do that in Javascript on the success using
window.location

Show <select> values in PartialView ASP.NET Core

I migrate project from ASP.NET MVC to ASP.NET Core
I was having Partial view with two daropdowns
So Controller method was like this
public ActionResult AddPeopleToProposal()
{
ViewBag.Worker = new SelectList(db.People, "Id", "FIO").ToList();
ViewBag.Proposal = new SelectList(db.Proposals, "Id", "Id").ToList();
return PartialView("AddPeopleToProposal");
}
And in View I was render it like this
<div class="modal fade" id="addPeopleToProposal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Добавить работника на заявку</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Html.Action("AddPeopleToProposal", "Manage")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
<button type="button" id="peopleToProposalCreate" class="btn btn-primary">Создать</button>
</div>
</div>
</div>
And Partial View
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Працівник</label>
#Html.DropDownList("Worker", null, "XXXX", htmlAttributes: new { #class = "form-control", #id = "peopleIdAdd" })
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Оберіть заявку</label>
#Html.DropDownList("Proposal", null, "XXXX", htmlAttributes: new { #class = "form-control", #id = "proposalIdAdd" })
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Коментар</label>
<input type="text" class="form-control" id="commentVchasno" >
</div>
But as I know #Html.Action was depricated
I realize this in Core like this
Controller
public ActionResult AddPeopleToProposal()
{
ViewData["Worker"] = new SelectList(_context.People, "Id", "FIO");
ViewData["Proposal"] = new SelectList(_context.Proposals, "Id", "Id");
return PartialView("Partials/AddPeopleToProposal");
}
And Partial View
<form>
<div class="form-group">
<label class="col-form-label">Працівник</label>
<select class="form-control" asp-items="ViewBag.Worker"></select>
</div>
<div class="form-group">
<label class="col-form-label">Оберіть заявку</label>
<select class="form-control" asp-items="ViewBag.Proposal"></select>
</div>
<div class="form-group">
<label class="col-form-label">Коментар</label>
<input type="text" class="form-control" id="commentVchasno" >
</div>
</form>
And View from where I cal Partial
<div class="modal fade" id="addPeopleToProposal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Добавить работника на заявку</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Html.Partial("Partials/AddPeopleToProposal")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
<button type="button" id="peopleToProposalCreate" class="btn btn-primary">Создать</button>
</div>
</div>
</div>
But at Core I don't have values in selects. Where is my problem?

If you want to initialize the page directly when getting the Partial View, try to put the following two lines of code into the get request of the main View of the Partial View. More about Partial views
ViewData["Worker"] = new SelectList(_context.People, "Id", "FIO");
ViewData["Proposal"] = new SelectList(_context.Proposals, "Id", "Id");
Or you could use the ViewComponent instead of the Partial View to get the fill data of the dropdownlists from the Invoke method in the view component class. Try to the code like below
ViewComponent.cs
public class AddPeopleToCountryViewComponent:ViewComponent
{
private readonly MVCDbContext _context;
public AddPeopleToCountryViewComponent(MVCDbContext context)
{
_context = context;
}
public async Task<IViewComponentResult> InvokeAsync(
int maxPriority, bool isDone)
{
ViewData["Customer"] = new SelectList(_context.Customer, "Id", "Name");
ViewData["Country"] = new SelectList(_context.Country, "Id", "Id");
return View();
}
}
The Default.cshtml of ViewComponent
<form>
<div class="form-group">
<label class="col-form-label">People</label>
<select class="form-control" asp-items="#ViewBag.Customer"></select>
</div>
<div class="form-group">
<label class="col-form-label">Country</label>
<select class="form-control" asp-items="#ViewBag.Country"></select>
</div>
<div class="form-group">
<label class="col-form-label">Comment</label>
<input type="text" class="form-control" id="commentVchasno">
</div>
Instead of the PartialView in the modal of the main view
<div class="modal-body">
#await Component.InvokeAsync("AddPeopleToCountry", new { })
</div>

pass a list of object to modal popup in ASP.net MVC

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">
Info
</li>
<li>
Projects
</li>
<li>
Devices
</li>
<li>
Cards
</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 ?

Setting the selected value of bootstrap dropdown button on postback in MVC view

I have built a bootstrap search with a dropdown button that allows selection of the search type, for example first name or last name. I have this mostly working and am able to pass the search type and string into my model without problem. The problem I have is that after the search button is clicked and the postback occurs the dropdown selector returns to its default setting, and I would like to display the search type that is placed back into the hiddenfield during postback.
The hidden field and the search string are populated on postback, but I'm unsure of the best method of setting the value of the dropdown.
<div class="row">
#using (Html.BeginForm())
{
<div class="input-group col-md-6 col-md-offset-3">
<div class="input-group-btn search-All-panel">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span id="search_All_concept">#SiteStrings.FilterBy</span> <span id="txt" class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>#SiteStrings.All</li>
<li>#SiteStrings.Level</li>
<li>UCI</li>
<li>#SiteStrings.FirstName</li>
<li>#SiteStrings.LastName</li>
</ul>
</div>
#Html.HiddenFor(s => s.search_All_param)
#*<input type="text" class="form-control" name="search_All_String" placeholder="Search term..." />*#
#Html.EditorFor(s => s.search_All_String, new { htmlAttributes = new { #class = "form-control", #placeholder = "Search for..." } })
<span class="input-group-btn">
<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
}
</div>

Just use a ternary to apply the active class:
<li class="#(Model.search_All_param == SiteStrings.All ? "active" : null)">
#SiteStrings.All
</li>
Rinse and repeat for each of the items in the dropdown.

Guess there are better ways, but this gives me exactly what I need...
<div class="row">
#using (Html.BeginForm())
{
<div class="input-group col-md-6 col-md-offset-3">
<div class="input-group-btn search-All-panel">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span id="search_All_concept">
#{
switch(#Model.search_All_param)
{
case "level":
#SiteStrings.Level
break;
case "firstname":
#SiteStrings.FirstName
break;
case "lastname":
#SiteStrings.LastName
break;
default:
#SiteStrings.FilterBy
break;
}
}
</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>#SiteStrings.All</li>
<li>#SiteStrings.Level</li>
<li>#SiteStrings.FirstName</li>
<li>#SiteStrings.LastName</li>
</ul>
</div>
#Html.HiddenFor(s => s.search_All_param)
#Html.EditorFor(s => s.search_All_String, new { htmlAttributes = new { #class = "form-control", #placeholder = "Search for..." } })
<span class="input-group-btn">
<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
}
</div>

Why is my Modal form posting a null model back to the controller

I have a partial view that I load in a Modal..in the index view the model div with the HTML.Partial
looks like this.
<div class="modal fade" id="modalEditDBInfo" role="application" aria-labelledby="modalEditDBInfoLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modalEditDBInfoContent" style="background-color:white; border-radius:10px; box-shadow:10px;">
#Html.Partial("_EditDatabaseInfo")
</div>
</div>
</div>
the partial view code is
#model Hybridinator.Domain.Entities.Database
<br />
<br />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="editModelTitle">Edit Database Info</h4>
</div>
<div class="modal-body">
#using (Html.BeginForm("EditDatabaseInfo", "Database", FormMethod.Post, new { #class = "modal-body" }))
{
<div class="form-group">
<div id="databaselabel" >#Html.LabelFor(m => m.database, "Database")</div>
<div id="databaseedit" >#Html.EditorFor(m => m.database)</div>
</div>
<div class="form-group">
<div id="databaseserverlabel" >#Html.LabelFor(m => m.database_server, "Database Server")</div>
<div id="databaseserveredit" >#Html.EditorFor(m => m.database_server)</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-inverse btn-primary" type="submit">Save</button>
</div>
}
</div>
If fire this controller successfully
[HttpPost]
public ActionResult EditDatabaseInfo(Database database)
{
string s = database.database;
//do other stuff
return RedirectToAction("Index");
}
Everything works fine up until I try to access the model in the controller post which should be passed into ActionResult method. The Model object is null
Object reference not set to an instance of an object.
anyone see what Im missing here?

You have to pass the model in Header from the view and from controller and in partialview too
lisk below
Please get look deeply in bold text and the text in between ** **
**#model Hybridinator.Domain.Entities.Database**
<div class="modal fade" id="modalEditDBInfo" role="application" aria-labelledby="modalEditDBInfoLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modalEditDBInfoContent" style="background-color:white; border-radius:10px; box-shadow:10px;">
#Html.Partial("_EditDatabaseInfo", **Model** )
</div>
</div>
[HttpPost]
public ActionResult EditDatabaseInfo(Database database)
{
string s = database.database;
//do other stuff
// **you have to get the model value in here and pass it to index action**
return RedirectToAction(**"Index", modelValue**);
}
public ActionResult Index(**ModelClass classValue**)
{
//pass the model value into index view.
return View(**"Index", classValue**);
}

Change the Model in view, partial view and in action . Instead of passing entity model, create view model and pass it in view as well as partial view. consider the following
#model **DatabaseModel**
<div class="modal fade" id="modalEditDBInfo" role="application" aria-labelledby="modalEditDBInfoLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modalEditDBInfoContent" style="background-color: white; border-radius: 10px; box-shadow: 10px;">
#Html.Partial("_EditDatabaseInfo", **Model**)
</div>
</div>
</div>
#model DatabaseModel
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="editModelTitle">Edit Database Info</h4>
</div>
<div class="modal-body">
#using (Html.BeginForm( new { #class = "modal-body" }))
{
<div class="form-group">
<div id="databaselabel" >#Html.LabelFor(m => m.DatabaseName, "Database")</div>
<div id="databaseedit" >#Html.EditorFor(m => m.DatabaseName)</div>
</div>
<div class="form-group">
<div id="databaseserverlabel" >#Html.LabelFor(m => m.DatabaseServer, "Database Server")</div>
<div id="databaseserveredit" >#Html.EditorFor(m => m.DatabaseServer)</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-inverse btn-primary" type="submit">Save</button>
</div>
}
</div>
public class DatabaseModel
{
public string DatabaseName { get; set; }
public string DatabaseServer { get; set; }
}
As of my knowledge Database is a key word, because of that it is getting null