I am trying to open the bootstrap modal by passing the model object dynamically. The modal content is in partial view as follows,
#model int
<div class="modal fade" id="modal-action-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<form>
<input type="text" value="#Model" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" >cancel</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" >delete</button>
</div>
</div>
</div>
</div>
And, here is my div which opens modal by passing model object dynamically,
<div>
#{
for (int i = 5; i > 0; i--)
{
<div>
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-id">
<i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete #i
</button>
#await Html.PartialAsync("_MyPartialView", i)
</div>
}
}
</div>
Now, the problem is no matter which button I click here it only passes the value 5 to the partial view. Also, I have only seen #await Html.PartialAsync() portion of code outside of for loop passing static model to the partial view in different applications. Am I missing anything here, conceptually? Any suggestion would be appreciated.
The reason is all _MyPartialView in same id id="modal-action-id", and that's why you click any button only to show same _MyPartialView.
You could change button data-target="#modal-action-#i"
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-#i">
and change div id="modal-action-#Model"
<div class="modal fade" id="modal-action-#Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Then, you can get what you want. All tested.
Related
I have the following modal on my page that works perfectly:
<!-- New Topic Modal -->
<div class="modal fade" id="newTopicModal" tabindex="-1" role="dialog" aria-labelledby="newTopicModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newTopicModalLabel">Add a New Topic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "topics/js_form", locals: {topic: #new_topic } %>
</div>
</div>
</div>
</div>
And is triggered by this:
<p class="text-center">Select a topic to add below or <a data-toggle="modal" data-target="#newTopicModal">create a new topic</a>.</p>
However, when I copied it over and tried to do a second one for projects, the screen greys over but no modal appears.
The modal that does NOT work is this:
<!-- New Project Modal -->
<div class="modal fade" id="newProjectModal" tabindex="-1" role="dialog" aria-labelledby="newProjectModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newProjectModalLabel">Add a New Project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "projects/js_form", locals: {project: #new_project } %>
</div>
</div>
</div>
</div>
Triggered by this:
<p class="text-center">Select a project to add this source to below or <a data-toggle="modal" data-target="#newProjectModal">create a new project</a>.</p>
I can't tell why the first one works and the second one doesn't. Can anyone spot what I'm doing wrong?
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" }))
Today I came across with this, I tried doing what was in the project and came across with the OP's problem about the full screen modal. I saw a solution below about about cutting the div and pasting it in an outer div.
I did what was in the solution but what happens is that the full modal div is retained and the normal popup shows.
If I add it to the script, no popup shows but backdrop changes.
How do I solve this? Thanks in advance
UPDATE
PARENT VIEW BUTTON
<button type="button" class="btn btn-success btn-sm modal-link" data-targeturl="#Url.Action("_Popup","Application",new { MotorId = item.motor_id, Serialno = item.serialno, AppNo = item.application_no, Remarks = item.remarks })"> View
</button>
PARENT MODAL
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
X
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
SCRIPT
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">' + '<div class="modal-content" id="modalbody" >' + data + '</div></div>').modal();
});
});
});
PARTIAL VIEW
#model iVehicle.ViewModel.FranchiseViewModel
<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">
<p>Some content here</p>
</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>
I got a list a buttons, that passes indicators Id and opens bootstrap modal. I found how to pass this value, but didnt found how to get it. Here is my code:
#model Project.Models.Survey
#{
var i = 1;
}
#foreach (var Clasificator in Model.Clasificators)
{
<h2>#Clasificator.Name</h2>
<br/>
foreach (var Criteria in Model.Criterias)
{
if (Criteria.ClasificatorId == Clasificator.Id)
{
<h3>#Criteria.Name</h3>
<br/>
foreach (var Indicator in Model.Indicators)
{
if (Indicator.CriteriaId == Criteria.Id)
{
<h4> #i #Indicator.Name </h4>
<br/>
<button id="#Indicator.Id" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-indicatorId="#Indicator.Id">
Add New Object
</button>
i++;
}
}
}
}
}
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
// Catch here indicator Id
If (indicatorId)
{}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It is possible to catch it ? I need to use that value in other if.
Below is my html that I have a modal popup window and a link and when the user click on submit i like to grab the data how would i do that?
#using (Html.BeginForm("Index", "Home", FormMethod.Post }))
{
<!-- 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
#Html.ActionLink("Edit", "Edit", null, new { id = #item.ID }, new { #data_toggle = "modal", #data_target = "#myModal" })
Add name attributes to your input controls and make the button type Submit and remove nested forms for your html, as show below -
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<!-- 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" name="Name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text" name="Message"></textarea>
</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 -->
}
Then add the following Home controller action for post -
[HttpPost]
public ActionResult Index(string Name, string Message)
{
return View();
}