googling didn't help me, I hope you can. I have a Modal.razor component like so:
<div class="modal" id="#Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#Header</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Body
</div>
<div class="modal-footer">
#Footer
</div>
</div>
</div>
#code {
[Parameter] public string Id { get; set; }
[Parameter] public RenderFragment Header { get; set; }
[Parameter] public RenderFragment Body { get; set; }
[Parameter] public RenderFragment Footer { get; set; }
}
On my Links.razor view I've got:
<Modal Id="myModalEdit" >
<Header>
Edit Link
</Header>
<Body>
<EditForm Model="#SelectedItem" OnValidSubmit="#Update">
<DataAnnotationsValidator />
<div class="form-group">
<label>Label:</label>
<div>
<InputText class="form-control" #bind-Value="#SelectedItem.Label" />
<ValidationMessage For="#(() => SelectedItem.Label)" />
</div>
</div>
<div class="form-group">
<label>Url:</label>
<div>
<InputText class="form-control" #bind-Value="#SelectedItem.Url" />
<ValidationMessage For="#(() => SelectedItem.Url)" />
</div>
</div>
<div class="form-group">
<label>Notes:</label>
<div>
<InputText class="form-control" #bind-Value="#SelectedItem.Notes" />
<ValidationMessage For="#(() => SelectedItem.Notes)" />
</div>
</div>
<button type="submit" class="btn btn-primary" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</EditForm>
</Body>
</Modal>
The Update method works perfectly well when I put the EditForm outside of the Modal Component. How do I make it work inside the Modal Component?
Thanks in advance.
Description such as working perfectly well or not working are clearly not helpful.. However, I guess the issue is that the call to the submit button result in the rendering of the parent component where your Model component resides.
Understand this, the submit button does not really cause the submission of the form data to the server. It does not lead to the tradition post back. Remember, Blazor is a SPA, no post back. As a matter of fact, the submit event is intercepted and cancelled or prevented.
Solution: Use a button with the #onclick directive, such as this:
<button #onclick="Update" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>
Note that the Update method should be defined in the parent component, automatically calling the StsteHasChanged method to re-render your page. If it still does not work, wait for good news...
Related
After beating my head against this problem for 3 days, I think I finally narrowed it down to an issue with the bootstrap modal button. I have modal button popup that displays a partial view, and a select list within that. When I create it to a separate page, it displays with no issues:
dropdownlistworking
However, when I put the exact same code into my modal button view, the dropdown stops displaying my items except for the default:
dropdownlistnotworking
Here is the code on the modal button:
Main view:
<div>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#addDoc">Add Doc</button>
<div id="addDoc" class="modal fade"">
<div class="modal-dialog" role="document">
<div class="modal-content">
#Html.Partial("_AddDoc", new Slingshot.Models.OrgDocsModel { OrgId = #Model.First().OrgId})
</div>
<div>
</div>
</div>
Partial:
<div class="modal-header">
<h4 class="modal-title" id="addDocLabel">Add Document</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" asp-action="_AddDoc">
<input type="hidden" asp-for="OrgId" />
<div class="form-group">
<label asp-for="DocName" class="control-label"></label>
<input asp-for="DocName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DocTypeName" class="control-label"></label>
<select asp-for="DocTypeName" asp-items="#Model.DocTypesList" class="form-control" >
</select>
</div>
<div class="form-group">
<input asp-for="UploadFile" class="custom-file-input" id = "OrgDoc">Choose File</input>
<label class="custom-file-label" for="OrgDoc" class="form-control"</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="Submit" value="Submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
I'm working on a function that allows agents to check and modify on what inventory their customers bought.
Basically, it's an update form inside a bootstrap modal, which is in a partial view under another partial view.
At first, I tried to bind my view model with the form inside the modal using tag helper. Something like:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Inventory</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="UpdateForm" asp-controller="Home" asp-action="UpdateD" data-ajax-method="post" data-ajax="true" data-ajax-success="InsertSuccess">
<div class="modal-body">
<div class="mb-3 row">
<label asp-for="FieldExample" class="col-sm-2 col-form-label">FieldExample</label>
<div class="col-sm-10">
<input asp-for="FieldExample" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">UpdateBtn</button>
</div>
</form>
</div>
</div>
I checked the form tag was closed properly and the data fields were valid.
But the form turns out to render none of my fields, closing immediately, like this:
<form id="UpdateForm" data-ajax-method="post" data-ajax="true" data-ajax-success="InsertSuccess" action="/Home/UpdateD" method="post"></form>
<div class="modal-body">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="PLAN_TYPE">FieldExample</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="FieldExample" name="FieldExample" value="test">
</div>
</div>
(...other fields)
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">UpdateBtn</button>
</div>
<input name="__RequestVerificationToken" type="hidden" value="...">
</div>
The form doesn't include my data fields for some reason, and I don't know what is making it wrong.
Even if I tried to make a form using a simple form tag with test fields inside, the form is still malformed (with no fields inside).
It will be thankful for me if some suggestions come up (sorry for my language)
After struggling a few days on this issue, I finally solved the problem by adding <td></td> on the <partial>.
Since the partial was rendered in a <table>, but wasn't nested in a <td> tag.
Adding partial view to a <td> tag seems to make the syntax more valid in my case. The form in the partial view will render with it's data field perfectly.
I am working on a web forms app where one of my user controls is used on multiple pages. Is there a simple if/else statement that can hide a div if not referenced to a specific page. For instance, I have a button group that is showing in both page A and B but I only need it to show on page B if that page is active. Any help will be appreciated.
Here is the button group I wish to have only shown on one user control:
<asp:Label ID="lblQty" runat="server" AssociatedControlID="txtQuantity">Quantity</asp:Label>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary" onclick="changeQuantity('minus');" id="minus-btn"><i class="fa fa-minus"></i></button>
</div>
<asp:TextBox ID="txtQuantity" cssClass="form-control form-control-sm" runat="server" value="1" min="1" max= ClientIDMode="Static"></asp:TextBox>
<div class="input-group-prepend">
<button type="button" class="btn btn-primary" onclick="changeQuantity('plus');" id="plus-btn"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
This is the block that is showing on two different .ascx controls.
You can add a public property in the ascx control:
public string MyPage { get; set; }
and in a method (or in a PreRender event) you can use:
public void MyMethod()
{
MyButton.Visible = MyPage == "B";
}
You can set the property from page B.aspx
<%# Register TagPrefix="cc" TagName="MyControl"
Src="~/Controls/MyControl.ascx" %>
<cc:MyControl runat="server" Id="MyControlId" MyPage="B" />
I want to save a register form and must save birth date in another format.
In model I have:
public DateTime BirthDate { get; set; }
In the view:
#model Univer.Model.KarApplicant
#{
ViewData["Title"] = "";
}
<div class="container MainMiddle" style="padding-top:50px;">
<hr />
<div class="row container-fluid">
<div class="col-md-10">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger">
</div>
<div class="form-row">
....
<div class="form-group col-md-4">
<label asp-for="BirthDate" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
<input asp-for="BirthDate" class="form-control example1" data-val="false" />
<span asp-validation-for="BirthDate" class="text-danger"></span>
</div>
</div>
</div>
....
<div class="form-row">
</div>
<div class="form-group float-left">
<input type="submit" value="next" class="btn btn-lg btn-primary btn-block" />
</div>
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/lib/persian-date/persian-date.js"></script>
<script src="~/lib/persian-datepicker/js/persian-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".example1").pDatepicker();
});
</script>
}
When I click on Submit button and send data to action of controller, with breakpoint check form value that pass to controller, birth dates value that are passed to controller is 01/01/0001 but I have value in persian mode in input in view.
My question is: why when set value with javascript in input and send to controller the value doesn't get sent?
UPDATE: after the comment i Added this code
public void ConfigureServices(IServiceCollection services)
{
services.Configure<RequestLocalizationOptions>(options =>
{
options.DefaultRequestCulture = new RequestCulture("fa-IR");
}); .....
}
and
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{....
app.UseRequestLocalization();
app.UseMvc()....
}
I'm developing ASP.NET MVC5 project with boostrap, jquery, jquery UI. Submit is working fine but FormCollection in create Action is arriving empty in HomeController. I don't know what I'm doing wrong or is missing. PLease need help. Below snippet code.
Index.cshtml:
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<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">Empleado</h4>
</div>
<div class="modal-body">
#using (Ajax.BeginForm("Create", "Home", new AjaxOptions() { HttpMethod = "post" }, new { id = "dialog", name = "dialog" }))
{
<div class="panel">
<div class="panel-body">
<div class="form-group">
<label class="control-label">Nombres</label>
<input type="text" class="form-control" id="modalNombres" placeholder="Nombres" />
</div>
<div class="form-group">
<label class="control-label">Apellidos</label>
<input type="text" class="form-control" id="modalApellidos" placeholder="Apellidos" />
</div>
<div class="form-group">
<label class="control-label">Fecha de Nacimiento</label>
<input type="text" class="form-control" id="modalFechaNacimiento" placeholder="Fecha Nacimiento" />
</div>
<div class="form-group">
<label class="control-label">Tipo Documento</label>
<select class="form-control" id="modalTipoDocumento">
<option class="placeholder" selected disabled value="">--- Seleccione ---</option>
#foreach (var item in ViewBag.TiposDocumento)
{
<option value="#item.Id">#item.Descripcion</option>
}
</select>
</div>
<div class="form-group">
<label class="control-label">Número de Documento</label>
<input type="text" class="form-control" id="modalNumeroDocumento" placeholder="Número Documento" />
</div>
</div>
<div class="panel-footer">
<button type="button" role="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" role="button" class="btn btn-primary" id="btnGrabar">Grabar</button>
</div>
</div>
}
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
HomeController is:
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
string nombres = collection["modalNombres"];
return RedirectToAction("Index");
}
catch
{
return View();
}
}
None of you <input> elements have name attributes so there is nothing sent to the server. Change
<input type="text" class="form-control" id="modalNombres" placeholder="Nombres" />
to
<input type="text" class="form-control" name="modalNombres" placeholder="Nombres" />
There is no need for id attributes unless you using javascript/jquery to refer to them.
However, I very strongly recommend you go to the MVC site and work through some basic tutorials and learn how to generate a view in MVC. You should have a model, use the strongly typed html helpers to bind to the properties of your model, and the POST method should have a parameter for the model so it is bound (you should never use FormCollection in MVC)
Note also, you using Ajax.BeginForm() which uses ajax to post the form values so return RedirectToAction("Index"); in your POST method is pointless. Ajax calls stay on the same page, they do not redirect.