ASP.NET Core MVC : can't render fields inside form tag - asp.net-core-mvc

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.

Related

Partial View Modal popup buttons not calling Controller Action Method

I am trying to implement a modal popup which gives a user two buttons, each pointing to action methods in separate controllers.
Here is the partial view:
<div class="modal fade" id="importOption">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Select Import Option</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="flex-container">
<div class="first">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="BundleNodes" asp-action="Import" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="auto" data-dismiss="modal">Select Node(s)</button>
</div>
</div>
<div class="second">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="Nodes" asp-action="SelectBind" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="select" data-dismiss="modal">Auto Import</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
This partial view is basically a modal popup with a form in the body element which contains two buttons. The buttons were taking up too much space in the parent view so I want to move them into a popup, reducing the number of buttons in the parent view. The problem is, once the buttons are in the partial view they don't trigger their respective controller actions.
I am rendering the partial view in the parent view using this line:
#await Html.PartialAsync("_ImportOptionPartialView")

ASP.NET MVC - Bootstrap 5 modal button does not display dropdownlist items

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>

how to pass data to modal dialog in laravel (Update method usinf modal box)?

I want to create a new post in my Database using modal box, and all works fine but when I use the button edit to update the post using modal dialog doenst work, I just want to take the cod('id') via a button from my view and pass to the modal.
the button code:
<a class="tip" id="test" data-toggle="modal" data-target="#myAlert2" title="Modifier">
and this is my code modal dialog
<div id="myAlert2" class="modal hide" id="modal-edit">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modifier un espace de travail</h3>
</div>
<div class="modal-body">
<p>
<div class="form--field">
<label class="labgroupe">Sujet *</label>
<input type="text" name="sujet" id="sujet" value="" class="form--element" placeholder="Sujet..." >
</div>
<div class="form--field">
<label class="labgroupe">Objectif du groupe</label>
<input type="text" name="objectif" class="form--element" placeholder="Objectif..." >
</div>
<div class="form--field" >
<label class="labgroupe">Plan d'action:</label>
<textarea class="form--element textarea" name="textarea" placeholder="Description..."></textarea>
</div>
#endforeach
</p>
</div>
<div class="modal-footer">
<input type="submit" value="Validate" id="button2" class="btn btn-success">
<a data-dismiss="modal" class="btn" href="#">Cancel</a> </div>
</div>
Any help plz ?
you cannot use 2 id's on the same div
<div id="myAlert2" class="modal hide" id="modal-edit">
changed to
<div id="myAlert2" class="modal hide">
and use same id on data-target="#myAlert2"
Modal button:
On your script, add this:
$("#test").click(function () {
$('#id').val($(this).data('id'));
});
Then add an input in the modal called #id.
<input type="text" id="id">

form post not working in laravel

I have a form as follows
<form class="form-inline" id="inviteForm" action="http://localhost:8000/team/sendInvitation" method="post">
<div class="modal fade" id="sendInvite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<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="myModalLabel">Send an invite</h4>
</div>
<div class="modal-body">
<form class="form-vertical">
<!-- Inviteename Form Input -->
<div class="form-group">
<label for="inviteename">Name :</label> <input class="form-control" required="required" name="inviteename" type="text" id="inviteename"> </div>
<!-- Email Form Input -->
<div class="form-group">
<label for="email">Email :</label> <input class="form-control" required="required" name="email" type="email" id="email"> </div>
<!-- Invitemessage Form Input -->
<div class="form-group">
<label for="invitemessage">Message :</label> <textarea class="form-control" required="required" name="invitemessage" cols="50" rows="10" id="invitemessage"></textarea> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="uk-button" data-dismiss="modal">Close</button>
<i class="uk-icon-send"></i> Send Email
</div>
</div>
</div>
</form>
and my route is as follows
Route::post('sendInvitation',['uses'=>'TeamsController#sendInvitation','as'=>'invitation.send']);
and the UI code is as follows
<form class="form-inline" id="inviteForm" action="{{URL::route('invitation.send')}}" method="post">
#include('admin.teams.partials.sendinvite')
</form>
and the controller code is as follows :
public function sendInvitation()
{
dd(Input::all());
}
I am expecting to see the input values dumped on the screen , but right now nothing is happening.
The include file has the UI for modal dialog.
My question is why is the form not being posted. I am pretty sure I am missing something which is very silly, but if you can point it out for me, it would be praiseworthy.
Thanks
The problem is the nested form structure.
http://www.w3.org/TR/xhtml1/#prohibitions
Remove <form class="form-vertical"> and replace with a normal <div> or <span>.

ajax file upload to a rest api

I have a form like below to upload a file.
<form id="formLicense" name="formLicense" enctype="multipart/form-data" class="form-horizontal" method="post" role="form">
<div class="modal-body">
<div id="tblUserData" >
<div class="space-4"></div>
<div class="form-group">
<div class="col-sm-9">
<input type="button" value="Select License" id="licenseFileButton" name="licenseFileButton" class="btn-minier btn btn-primary"><span id="selectedFile"></span>
<input style="display: none" type="file" name="licenseFile" id="licenseFile" size="50">
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="checkbox" name="merge" value="true" class="ace "> <label class="lbl"> Merge with current license</label>
</div>
</div>
<div class="space-4"></div>
<div class="form-group">
<div class="col-sm-9">
<select name="destination">
<option value="1">path1</option>
<option value="2">path2</option>
<option value="3">path3</option>
</select>
</div>
</div>
<div class="space-4"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="licenseSave">Upload License</button>
</div>
</div>
</form>
I have a rest api to which i should pass this 3 form elements and it will do all file upload processing.
the api looks like below.
Path: POST /license/install
Request content type: multipart/form-data
Response content type: application/json
Parameters (HTML form):
licenseFile – file payload
merge – true if uploaded license should be merged with existing one, false for overwrite
destination:
1 - Path1
2 - path2
3 - path3
Now on save click I should via ajax I should be able to call this rest api and post all these 3 values to api and get response in success function and display it. I am not getting how I should do this. I saw many examples on net. but all are very complex. I dont need progress bar or anything. I want some thing simple which solve my this purpose. Your help will be much appreciated.

Resources