Passing Id to bootstrap modal popup - asp.net-mvc

Here is working after tweak to JQuery:
$(.modalLink").click(function () {
var passedID = $(this).data('id');
$('#id').val(passedID);
$(".modal-body .hiddenid").val(passedID);
});
//View Link
Load me
How to capture the Id that I'm passing when the <a href click?
So I have a modal popup and when the user clicks I want to get the id of it when the user post the data.
View:
#using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Record</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="FirstName" class="control-label">First Name:</label>
#Html.Editor("FirstName", new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="form-group">
<label for="LastName" class="control-label">Last Name:</label>
#Html.Editor("LastName", new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
Controller:
[HttpPost]
public ActionResult Employee(string id, string FirstName, string LastName)
{
//more work here..
return View("Index");
}

First you need a class or something you can use to reference the links:
Load me
You need a hidden form field to hold the id that will be submitted with the form. So put this in your modal form:
#Html.Hidden("id", "", new { #class = "hiddenid" })
Then, just use some javascript. I assume jQuery would work fine for you?
$(document).on("click", ".modalLink", function () {
var passedID = $(this).data('id');
$(".modal-body .hiddenid").val(passedID);
});

Related

is it possible to pass Model to Partial View using JavaScript?

I need to pass a Model to a partial view. I first pass a value of ID, then I get the Model I need based on that ID.
The scenario: I have a table with a delete button in each row. I need to display a confirmation bootstrap modal that includes a Model.
The problem, it's not working and I don't know if there another way to do that or not
In the section of javascript BPCategoriesId not recognized
Here is my code attempt.
Delete Button
#foreach (var item in Model.BPCategories)
{
...
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-bs-toggle="modal" data-bs-target="#exampleModal">
Delete
</button>
...
}
Bootstrap Modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="ModelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
<!--<partial name="Delete" model="#Model.BPCategories.Where(id => id.Id == returnID()).FirstOrDefault()" />-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let BPCategoriesId = btn.dataset['id'];
var jsonModel = #Html.Raw(Json.Serialize(#Model.BPCategories.Where(id => id.Id == BPCategoriesId).FirstOrDefault()));
$("#ModelLoad").load('#Url.Action("Delete", "BootstrapCategories")', jsonModel);
});
}
});
</script>
#model LoadPartialView.Models.TestViewModel
#foreach (var item in Model.BPCategories)
{
<p>
<button type="button" data-id="#item.Id" class="btn btn-outline-danger w-50" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
</p>
}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="modelLoad">
<!--here I need to load my partial view with a model using JS-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form asp-action="Delete">
<input type="hidden" asp-for="Id" />
</form>
</div>
</div>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(function () {
var btns = document.querySelectorAll('[data-id]');
for (let btn of btns) {
btn.addEventListener('click', () => {
let bpCategoryId = btn.dataset['id'];
$("#modelLoad")
.load('#Url.Action("Delete", "BootstrapCategories")', {
bpCategories: JSON.parse('#Html.Raw(Json.Encode(Model.BPCategories))'),
bpCategoryId: bpCategoryId
});
});
}
});
</script>
}
Demo is pushed to GitHub.

Bootstrap dialog box on submit direct to specific controller action item

I have the following code:
#using (Html.BeginForm(new { id = "createForm" }))
{
#Html.AntiForgeryToken()
#Html.Hidden("SortField", info.SortField)
#Html.Hidden("SortDirection", info.SortDirection)
#Html.Hidden("CurrentPageIndex", info.CurrentPageIndex)
#Html.HiddenFor(model => model.FormID)
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body wrap">
Body Content
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="btnActive">SUBMIT</button>
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
</div>
</div>
</div>
</div>
On submit, it goes to the default POST controller action item. I like to direct it to a specific action item though. Any way to specify what it should be. Thank you in advance.
spec the action and controller here:
#using(Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "createForm" }))

MVC refresh table data in modal using entity framework

good day. how can I refresh a modal table data? well, I have this textbox that when a user clicks show a modal pop-up. inside the pop-up is a partial view with the table and a search. When a user searches, instead of reloading the value in the modal, it redirects me to the partial view itself. I have seen a lot of examples like this one -- https://forums.asp.net/t/2098629.aspx?Advance+search+in+a+MVC+Popup+Window+ -- but still cannot go through it. its basically a modal popup but contains a partial view in it, once the search was clicked, just need to reload the table and no more. thanks in advance
Partial View Code:
public ActionResult ShowTaxPayer(int? page, string searchString)
{
var user = (from u in db2.Payers
select new Taxpayer
{
ID = u.objid,
Firstname = u.firstname,
Lastname = u.lastname,
Middlename = u.middlename,
Address = u.primaryaddress
});
if (string.IsNullOrEmpty(searchString))
{
return View(user.ToList().ToPagedList(page ?? 1, 10));
}
else
{
return View(user.Where(s => s.Firstname.Contains(searchString)).ToList().ToPagedList(page ?? 1, 10));
}
}
Razor:
#using (Html.BeginForm("Index", "Wizard", FormMethod.Post))
{
#Html.ValidationSummary(true)
<fieldset>
<div class="wizard-step">
#Html.Label("Taxpayer Name")
#Html.TextBoxFor(m => m.taxpayername, new { data_toggle = "modal", data_target = "#myModal", data_backdrop = "static", data_keyboard = "false" })
#Html.ValidationMessageFor(m => m.taxpayername)
</div>
<div class="wizard-step">
#Html.Label("Taxpayer Address")
#Html.EditorFor(m => m.taxpayeraddress)
#Html.ValidationMessageFor(m => m.taxpayeraddress)
</div>
<div class="wizard-step">
#Html.Label("Trade Name")
#Html.EditorFor(m => m.tradename)
#Html.ValidationMessageFor(m => m.tradename)
</div>
<div class="wizard-step confirm">
</div>
<p>
<input type="button" id="back-step" name="back-step" value="<-- Back" />
<input type="button" id="next-step" name="next-step" value="Next -->" />
</p>
</fieldset>
}
The Modal:
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
#{Html.RenderAction("ShowTaxPayer", "Wizard");}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I just need to load the data from my model in the modal and not redirect me to the actual view. Thanks in advance.
Here the Model Popup
<div class="modal-body">
#{Html.RenderAction("ShowTaxPayer", "Wizard");}
</div>
and changed to
<div class="modal-body" id="popupTableName">
</div>
and Add Javascript
<script>
window.onload = LoadTable();
function LoadTable(){
$.get( '#Url.Action("actionName","ControllerName", new { id = Model.ID } )', function(data) {
$('#popupTableName').html(data);
});
}
function onChange(){
LoadTable();
}
</script>

Update database using partial view in Modal

I have a partial view that is strongly typed named "ChangePassword.cshtml" as so:
#model WebApplication1.Models.ViewModel.ChangeUserPassword
#{
Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#using (Html.BeginForm("ChangePassword", "Account"))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="col_full">
#Html.LabelFor(model => model.OldPassword, htmlAttributes: new { #class = "capitalize t600" })
#Html.TextBoxFor(model => model.OldPassword, null, new { #class = "sm-form-control", id = "txtOldPassword" })
#Html.ValidationMessageFor(model => model.OldPassword)
</div>
<div class="col_full">
#Html.LabelFor(model => model.ChangedPassword, htmlAttributes: new { #class = "capitalize t600" })
#Html.TextBoxFor(model => model.ChangedPassword, null, new { #class = "sm-form-control", id = "txtChangedPassword" })
#Html.ValidationMessageFor(model => model.ChangedPassword)
</div>
<div class="col_full">
#Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { #class = "capitalize t600" })
#Html.TextBoxFor(model => model.ConfirmPassword, null, new { #class = "sm-form-control", id = "txtConfirmPassword" })
#Html.ValidationMessageFor(model => model.ConfirmPassword)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<input type="submit" value="Save Changes" class="btn btn-primary" id="updatePassword()"/>
</div>
</div>
}
and I have a cshtml that invokes this partial view in a modal.
#model WebApplication1.Models.DB.SysUser
<div class="modal fade" id="modalPassword" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div id="message"></div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Change Password</h4>
</div>
<div class="modal-body">
#*<p class="nobottommargin">#Html.Action("InvokeChangePassword", "Account")</p>*#
<p class="nobottommargin">
#{
#Html.RenderPartial("ChangePassword", ); <----- HOW TO USE RENDER PARTIAL
}
</p>
</div>
</div>
</div>
</div>
</div>
I will be using the modal to update the password. Since it doesn't allow me to use #Html.RenderPartial("ChangePassword"), how can I use the #Html.RenderPartial() when it needs an object of ChangeUserPassword as its model? Thank you.
If you want to use renderpartial, add the model you want to pass to the partial view inside the main model.
example:
If you want SysUser and ChangeUserPassword, then add a main model which contains both this class.
Public class MainModel{
public SysUser suser {get;set;}
public ChangeUserPassword cup {get;set;}
}
Then pass the main model inside the main view and pass ChangeUserPassword like below:
#model WebApplication1.Models.MainModel
<div class="modal fade" id="modalPassword" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div id="message"></div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Change Password</h4>
</div>
<div class="modal-body">
#*<p class="nobottommargin">#Html.Action("InvokeChangePassword", "Account")</p>*#
<p class="nobottommargin">
#{
Html.RenderPartial("~/Views/Users/_ChangePassword.cshtml", Model.cup);
}
</p>
</div>
</div>
</div>
</div>
</div>
Note: Change the path and names according to your need.

Using Pop-up windows display the validation message

I use pop menu for registration form in mvc 4. The issue is all validation are performed in another Page.But the validation held in pop up window only.
This is a simple example using Ajax.BeginForm() with bootstrap modal:
Note: Remember adding
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
Your controller:
public ActionResult Edit()
{
return View(new QuestionMaster());
}
[HttpPost]
public ActionResult Edit(QuestionMaster question2)
{
if (!ModelState.IsValid)
{
return View(question2);
}
return RedirectToAction("Index");
}
Your view code:
#model MVCApp.Controllers.QuestionMaster
<div id="replaceDiv">
#using (Ajax.BeginForm(null, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv", OnSuccess = "$('#myModal').modal('show');" }))
{
<fieldset>
<legend>QuestionMaster</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Question)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Question)
</div>
</fieldset>
<p>
<input type="submit" value="Save" />
</p>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
#Html.ValidationMessageFor(model => model.Question)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>

Resources