How to create a form that has a search function (pull data from the database) AND a submit function (add data to the database) at the same time using the BeginForm() method? I am reviewing the overloads on MSDN and I don't seem to find one.
Code:
#using (Html.BeginForm()){
<table>
#*Bunch of textboxes and dropdown lists*#
</table>
<div id=" buttonHolder">
<input id="Search" type="button" value="Search" />
<input id="Reset1" type="reset" value="Reset" />
<input id="Submit1" type="submit" value="Add" />
</div>
}
You can use two approaches here:
handle onsubmit and fetch/save data with AJAX (you can do it even with Html.BeginForm but it's easier to go just with regular <form ...)
#using (Html.BeginForm("DoIt", "DoItAction", FormMethod.Post, new { onsubmit = "submitWithAjax(event); return false;" }))
create two separate forms with a different action/controller pair
Related
I got a regular POST in my mvc app:
#using (Html.BeginForm("Update", "AController", FormMethod.Post))
{
<div style="margin-bottom:20px"></div>
#Html.AntiForgeryToken()
<div class="form-input">
<input class="form-control" type="text" name="#(nameof(Model.Name))" value="#(Model.Name)" />
</div>
<br />
<div class="form-input">
<input class="form-control" type="text" name="#(nameof(Model.Name2))" value="#(Model.Name2)" />
</div>
<br />
<div>
<input type="file" name="Image" id="Image" name="#(nameof(Model.Image))" value="#(Model.Image)" />
</div>
<button type="submit" class="btn btn-primary btn-sm">TEXT HERE</button>
}
Now when doing the submit the two regular text fields gets binded the model but the file does not.
After some reading it seems like the upload part should be in a separate form, is that correct?
I really want to avoid having two different POST as it does not fit the design of the page.
You should be able to get the posted file from the Request directly in the controller with following code
if(Request.Files.Count > 0)
{
var file = Request.Files[0];
...
}
But you need to add the multipart/form-data to your form
#using (Html.BeginForm("Update", "AController", FormMethod.Post, new { enctype="multipart/form-data" }))
Check What does enctype='multipart/form-data' mean? for reference on the multipart/form-data
I'm writing an MVC website in C# with razor syntax.
I have some code here:
#using (Html.BeginForm("DoSignUp", "SignUpController", FormMethod.Post))
{
<input type="text" width="3000" value="" name="Name" />
<input type="submit" value="Register" /
}
So this form should post to the SignUpController on the DoSignUp method. Instead of doing that it just posts back to the page I'm currently on which is called SignUp. I suspected there might be something wrong with my routing but when I look at the html that is being generated through the browser developer tools i see this:
<form action="" method="post">
<input type="text" width="3000" value="" name="selectedURL">
<input type="submit" value="Register">
</form>
Edit: Well I wrote this out and then looked at my code again. The problem which I keep bloody doing is that SignUpController should just be SignUp.
Remove the 'Controller' from your controller name (SignUp, not SignUpController). It's assumed to be a controller by convention
#using (Html.BeginForm("DoSignUp", "SignUp", FormMethod.Post))
{
<input type="text" width="3000" value="" name="Name" />
<input type="submit" value="Register" /
}
I have a fairly simple form created in a partial view and loading the form on a jquery dialog. The view is tightly bound to a model. When the user clicks on the submit button with out entering any inputs, I need to show the validation messages.
<div>
<form method="post" enctype="multipart/form-data" id="ssimForm" action="Home/ProcessUploadedFile"
onsubmit="return false;">
<div>
<h3>
Select the file to be uploaded :</h3>
<span>
<input type="file" name="UploadFileName" id="UploadFileName" /></span>
</div>
<div>
<h3>
Select the date range :</h3>
<span class="uslabel">From Date(MM/dd/yyyy): </span>
<input class="usdate" id="usfromdate" name="StartDate" type="date" />
<span class="uslabel">To Date(MM/dd/yyyy): </span>
<input class="usdate" id="ustodate" name="EndDate" type="date" />
</div>
<div>
<br />
<input type="submit" id="submitButton" name="submitButton" value="Process File" />
</div>
#Html.ValidationSummary()
<div class="message-success">
<span>#ViewBag.Confirmation</span>
</div>
<div class="message-error">
<span>#ViewBag.Error</span>
</div>
</form>
</div>
Now comes the actual problem. when I submit the form I am able to see the validationSummary object populated with the messages, but they are not getting rendered on the screen.
I am able to see the messages if I replace the content of the dialog with the response from the jquery ajax call, that fetches the entire view from the server side. I do not want to take this approach as I beleive this is not the correct way to return validation summary in MVC.
Am I missing something? Any help is appreciated.
I don't know why you don't have the #using (Html.BeginForm()) { } block.
Here is my blog post for a quick and easy way to set up Validation Summary + Unobtrusive Validation for MVC3+.
http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx
MVC3 non-sequential index hidden inputs for model binding..
<input type="hidden" name="Index" value="whatever" />
Does it matter if they go before, after, in the middle of the other related inputs to be posted?
Does it matter at all where they end up in the posted data?
For example, can they all be lumped together and it still works?
<input type="text" name="[A].Id" value="1" />
<input type="text" name="[B].Id" value="2" />
<input type="hidden" name="Index" value="A" />
<input type="hidden" name="Index" value="B" />
No, the order of your form fields does not matter, nore where they appear on the html page.
The most important factor for MVC3 is the name of the fields must match to the name of your controller/action parameter.
If you have two fields with the same name however, only one value will be returned into your action.
As long as the hidden fields are located inside of the form it should not matter the order in which they are placed. Please see code sample below. Notice how the hidden fields are put anywhere inside of the form.
#using (Html.BeginForm())
{
#Html.ValidationSummary(false, "Please correct the following errors")
#Html.HiddenFor(m => m.CoolStuffId)
#Html.Partial("_EditCoolStuff", Model)
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a data-role="button" href="#Url.Action("ActionPlan", "Store", new { id = Model.StoreID })">Cancel</a></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
#Html.HiddenFor(m => m.TypeId)
}
I have a company object which has a list of branch objects,
my company view(residing in the company directory) has a strongly typed branch list view (residing in the branch directory)in it,
each branch in the branch view has a delete button which I want to post to a delete action in the branch controller.
at present the invoked delete action is the one in the company controller
(there is a delete action in both company and branch)
I believe I understand the reason it is doing what it is, however what is the best practice in this situation....
should the branch list partial view reside in the company or branch directory?
should the delete branch action reside in the company or the branch controller?
I would think the branch list should be in the branch directory and call the branch controller, but how do I get it to do this when the partial view is loaded into the company details View?
Hope that made sense,
Thanks,
Mark
<% foreach (var item in Model) { %>
<tr>
<td>
<form action="Edit" method="get">
<input type="submit" value="Edit" id="Submit1" />
<input type="hidden" name="id" value="<%= item.Id %>" />
</form>
|
<form action="Branch" method="get">
<input type="submit" value="Details" id="Submit2" />
<input type="hidden" name="id" value="<%= item.Id %>" />
</form>
|
<form action="BranchDelete" method="post">
<input type="submit" value="BranchDelete" id="Submit1" />
<input type="hidden" name="id" value="<%= item.Id %>" />
</form>
You need to surround each set of fields that you want submitted with a separate form tag. You can have more than one form tag per page. In fact, you might want each partial view to have its own form tag that submits to a different controller action.
Put the partial views wherever makes most sense. The file location has nothing to do with how the form is submitted back from the browser.
You can post to different controllers like this. One posts to the Branch controller and one posts to the Company controller.
<% using (Html.BeginForm("RemoveBranch", "Branch", FormMethod.Post, new { #class = "branchform" }))
{
Html.RenderPartial("~/Views/Branch/BranchView.ascx");
}%>
<% using (Html.BeginForm("RemoveCompany", "Company", FormMethod.Post, new { #class = "companyform" }))
{
Html.RenderPartial("~/Views/Company/CompanyView.ascx");
}%>
In each view or partial view, all you need is a submit button:
<input type="submit" value="Delete" />