We Keep Coding

File upload ASP.NET MVC in multiple submits form

I have a small tool that downloads reports based on the specified options. The download works well. And now, I want to also upload a file to the folder and then further use it.
The problem is that I already have one submit button on the form that is used for the download and when I am adding another button for the upload, only download is triggered.
I tried to resolve it using an #Html.ActionLink(), but no success. Is there any proper way to resolve the issue? I know that there is a possibility to capture the submit value and then check in one main ActionResult in the Controller and redirect to the respective ActionResult, but I don't want to do it, since there are too many POST Actions in one controller.
Here is my View - download.cshtml:
#using (Html.BeginForm())
{
<fieldset>
<div class="title">Click to download report</div>
<div class="field">
<input id="downloadBtn" type="submit" class="button" value="Download" />
</div>
</fieldset>
<fieldset id="Option_ClientInfo">
<div class="title">
Image
</div>
<div class="field">
<input type="file" name="ImageUpload" accept="image/jpeg" />
<p>#Html.ActionLink("Upload", "UploadImage", new { controller = "Home", enctype = "multipart/form-data"}, new { #class = "button" })</p>
</div>
</fieldset>
}
And the controller - HomeController.cs:
public partial class HomeController : Controller
{
// some functions
// ....
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadImage(HttpPostedFileBase imageFile)
{
string path = Path.Combine(this.GetImageFolder, Path.GetFileName(imageFile.FileName));
imageFile.SaveAs(path);
return null;
}
// additional POST functions for other forms
// ....
[HttpPost]
public ActionResult Download(Info downloadInfo)
{
// perform checks and calculations
return new reportDownloadPDF(downloadInfo);
}
}
Any suggestion in appreciated.

The solution is just separate upload and download functionalities using two forms so it wont conflict while submitting.
#using (Html.BeginForm())
{
<fieldset>
<div class="title">Click to download report</div>
<div class="field">
<input id="downloadBtn" type="submit" class="button" value="Download" />
</div>
</fieldset>
<fieldset id="Option_ClientInfo">
<div class="title">
Image
</div>
</fieldset>
}
#using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<fieldset>
<div class="field">
<input type="file" name="ImageUpload" accept="image/jpeg" />
<p>
<input id="uploadBtn" type="submit" class="button" value="Upload" />
</p>
</div>
</fieldset>
}
There is another issue as well. Image control name and Post Action method parameter name should be same.
So your upload image Post Action method will be:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UploadImage(HttpPostedFileBase imageUpload)
{
string path = Path.Combine(this.GetBasePath + "/img/tmp/", Path.GetFileName(imageFile.FileName));
imageFile.SaveAs(path);
return null;
}

How do I return a partial view from my controller to display on my main view?

I have the view:
<div>
<form method="post"action='#Url.Action("ImportProviders")'>
#(Html.Kendo().Upload()
.Name("files")
.HtmlAttributes(new { aria_label = "files" })
.Validation(validation => validation.AllowedExtensions(new string[] { ".csv" }))
)
<p class ="text"> This File Browser only Accepts .CSV File.</p>
<input type="hidden" id="clientNumber" name="Clientid" value="" />
<p class="submit-btn">
<input type="submit" value="Upload Providers" onclick="submit" id="UploadClick" class="k-button k-primary" />
<i class="fa fa-spinner fa-pulse fa-3x fa-fw" id="makeMeDisappear"></i>
<span class="sr-only">Loading...</span>
</p>
</form>
</div>
<br />
<div>
#Html.Partial("ImportedProviderView");
</div>
I have the c# Controller:
public PartialViewResult ImportProviders(String ClientId, IEnumerable<HttpPostedFileBase> files) {
...
ImportProvidersView(result,FaultyRowsTable,"FAULTY ROW");
ImportProvidersView(result, InsertedRows, "INSERTED ROW");
ImportProvidersView(result, UpdatedRowsTable, "UPDATED ROW");
return PartialView("ImportedProviderView", result.OrderByDescending(x=>x.Createdon));
}
But everytime I run this page it takes me to the partial view only, it doesn't inject it into the main view above.
MAIN QUESTION
How do I make it display inside the main view above?

The #Html.Partial method is only going to render the partial view. If you need to execute the controller action that returns the view you will need to use the #Html.Action method
<div>
#Html.Action("ImportProviders", "ControllerName", new { ClientId = <>, files = <> })
</div>

#Html.Partial renders the partial view on the server as part of the main view, which is returned to the browser. If you need something dynamic when the user does something in the browser then you'll probably want to GET/POST to a controller action rendering a new view - or you'll want to call a controller action rendering a partial view using ajax.

Send string from View to Controller using httpGet - MVC

I am new to MVC so please bear with me.
I am trying to send a string from a textbox to a controller method so I can find an object in a database. However, I do not know how to send the string successfully from the view to the controller in a HttpGet request (only in HttpPost)
The code in my view
<div>
<label>Email</label>
#Html.TextBox("email")
</div>
<div class="btn btn-success">
#Html.ActionLink("Edit RSVP", "Edit")
</div>
The ViewResult method in my controller
// Problem is the email parameter is always null
[HttpGet]
public ViewResult Edit(string email)
{
// If the email the typed is find, it will display their contents on to a RsvpForm view
return View("RsvpForm", guestRepository.Find(email));
}
Anyone know how I can send this string through, I would be grateful.
Thanks

Like this:
#using (Html.BeginForm("Edit", "ControllerName", FormMethod.Get))
{
<div>
<label>Email</label>
#Html.TextBox("email")
</div>
<div class="btn btn-success">
<input type="submit" value="Edit RSVP" />
</div>
}
Note: I can't tell from your description whether or not you are trying to do this without reloading the page. This option will post the page to the controller, so you will get a page reload.
If you want this to load without posting the page, you can look into Ajax.BeginForm. Here is a StackOverflow article with a decent primer on the AJAX form.
update
For your example, you may could do something like this if you want to use AJAX. This is all untested, but may be close to what you would need.
First you can create a partial view that represents the user data that you want to display:
RsvpForm.cshtml
#model GuestData
<div class="hdr">Name</div>
<div class="value">#Model.Name</div>
<div class="hdr">Email</div>
<div class="value">#Model.Email</div>
Then you want to make sure that your controller returns the partial view based on the email that is sent via the GET:
GuestDataController.cs
[HttpGet]
public ActionResult Edit(string email)
{
// If the email the typed is find, it will display their contents on to a RsvpForm view
return PartialView("RsvpForm", guestRepository.Find(email));
}
Then you create the AJAX form to submit the request via a GET and load the partial view without reloading the page: view.cshtml
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Edit", "GuestData", null, new AjaxOptions { UpdateTargetId = "UserData", HttpMethod = "Get" }, null))
{
<div>
<label>Email</label>
#Html.TextBox("email")
</div>
<div class="btn btn-success">
<input type="submit" value="Edit RSVP" />
</div>
}
<div id="UserData"></div>

The easiest way to do it is to create a form as follow :
#using(Html.BeginForm("Edit", ControllerName, FormMethod.GET))
{
#Html.Label("Email")
#Html.TextBox("email")
<input type="submit" value="Edit RSVP"/>
}
or you can use Jquery to change the link when textbox value change (which I do not recommend):
$('input[name=email]').on('change' function()
{
var value = $(this).val();
var href = $('.btn').next('a').attr('href');
href += '?email='+value;
$('.btn').next('a').attr('href', href)
});

Model not being passed to rendered view

I am having an issue getting data in my model on my MakePayment.cshmtl view.
The AccountScreen.cshtml is calling the MakePayment.cshtml view:
#model SuburbanCustPortal.SuburbanService.CustomerData
#{
ViewBag.Title = "Account Screen";
}
<h2>AccountScreen</h2>
<div class="leftdiv">
<fieldset>
<legend>customer info</legend>
#Html.Partial("CustomerInfoPartialView", Model)
</fieldset>
<fieldset>
<legend>delivery address</legend>
#Html.Partial("DeliveryAddressPartialView", Model)
</fieldset>
<fieldset>
<legend>delivery info</legend>
#Html.Partial("DeliveryInfoPartialView", Model)
</fieldset>
</div>
<div class="rightdiv">
<fieldset>
<legend>balance</legend>
<div>
#Html.Partial("BalancePartialView", Model)
</div>
</fieldset>
<fieldset>
<legend>payment</legend>
<div>
#Html.Partial("MakePayment", Model)
</div>
</fieldset>
<fieldset>
<legend>billing info</legend>
<div>
#Html.Partial("BillingInfoPartialView", Model)
</div>
</fieldset>
</div>
My MakePayment.cshtml view:
#model SuburbanCustPortal.SuburbanService.CustomerData
#using (Html.BeginForm("MakePayment2", "Customer", FormMethod.Post))
{
<div style="text-align:center;">
<input class="makePaymentInput" type="submit" value="Make a Payment" />
</div>
}
My CustomerController:
public ActionResult AccountScreen(LogOnModel model)
{
return ShowCustomer(model.AccountNumber);
}
public ActionResult MakePayment(CustomerData model)
{
return View("MakePayment", model);
}
[HttpPost]
public ActionResult MakePayment2(CustomerData model)
{
//CustomerData model = new CustomerData();
var newmodel = new PaymentModel.SendToGateway();
newmodel.AccountBalance = model.TotalBalance;
newmodel.Amount = model.TotalBalance;
return RedirectToAction("PrePayment", "Payment", newmodel);
}
The public ActionResult MakePayment(CustomerData model) is never being reached.
My problem: The [HttpPost] public ActionResult MakePayment2(CustomerData model) is being reached but the model has nulls in it.
I know the data initial model from the AccountScreen is being populated since the other views that are being rendered is showing data.
Anyone see what I am doing wrong?

The problem is there's nothing inside your form except a submit button. You need to make sure input fields are there (either text boxes, select lists, or hidden fields), as those are what post data back to the controller.
You could try using EditorForModel inside your partial view:
#using (Html.BeginForm("MakePayment2", "Customer", FormMethod.Post))
{
#Html.EditorForModel()
<div style="text-align:center;">
<input class="makePaymentInput" type="submit" value="Make a Payment" />
</div>
}
Edit based on comments
Razor doesn't include an Html.HiddenForModel() method, for whatever reason. Possible workarounds:
List out each property of the model using Html.HiddenFor(model => model.Property)
Annotate the model properties with \[HiddenInput\]
Use EditorForModel() but wrap it in <div style="display: none;"></div> (NOTE that a malicious user can still modify the properties as if they were visible.)
Use only Html.HiddenFor(model => model.id) and fetch the model in the controller.
Use the serialization method in the MVC Futures assembly
Related quesion here:
Is there some way to use #Html.HiddenFor for complete model?

The problem is, you are creating a form containing nothing else than a submit button.
When you submit it, it posts nothing back to the server, thus your function receives an empty model.
#using (Html.BeginForm("MakePayment2", "Customer", FormMethod.Post))
{
<div style="text-align:center;">
<input class="makePaymentInput" type="submit" value="Make a Payment" />
</div>
}
This translates as :
<form method="POST" action="{url}">
<div style="text-align:center;">
<input class="makePaymentInput" type="submit" value="Make a Payment" />
</div>
</form>
More details :
Since in the logic you then redirect to a new page to collect payment information, you don't want to give the user the opportunity to mess with your model, thus you should query your customer data from your Context instead of trusting what is submitted in the POST.
Thus all you really need to add if this :
#using (Html.BeginForm("MakePayment2", "Customer", FormMethod.Post))
{
#Html.HiddenFor(model => model.{ID Field})
<div style="text-align:center;">
<input class="makePaymentInput" type="submit" value="Make a Payment" />
</div>
}
This way, you will be able to get your model back in the server side code.

Basically, your form submits nothing as there are no input fields inside the form scope. Try to wrap all your html in AccountScreen.cshtml within #using (Html.BeginForm( statement (and throw it out from MakePayment.cshtml).

Why does validation break on partial view?

This validation should work, but the post fires right past it if there are no selected values in the dropdown. When moved to another non-partial the validation works just fine. Edited for brevity.
ViewModel:
public class BuilderVM
{
[Display(Name = "Select A Task")]
[Required]
public int? TaskId { get; set; }
public GenericSelectList Tasks { get; set; }
}
Parent View (the partial view is rendered at the bottom of this page after a post. as you may have noticed, the ajax options dictate that the partial view will be rendered in div id="MoveOn"):
#{
ViewBag.Title = "Builder";
AjaxOptions ajaxOpts = new AjaxOptions
{
LoadingElementDuration = 2,
LoadingElementId = "removeChoice",
UpdateTargetId = "MoveOn"
};
}
<div id="removeChoice">
#using (Ajax.BeginForm("Selected", ajaxOpts))
{
<fieldset>
<div>
//Data For Submission (This data validates perfectly before post)
</div>
<p><input type="submit" value="Go" /></p>
</fieldset>
}
</div>
<div id="MoveOn"></div>
Partial View (rendered after a post from parent view):
#model namespace.BuilderVM
#{
AjaxOptions ajaxOpts = new AjaxOptions
{
UpdateTargetId = "Entry",
LoadingElementDuration = 2,
LoadingElementId = "RemoveEntry"
};
}
<div id="RemoveEntry">
<h2>Details</h2>
#using (Ajax.BeginForm("Data", ajaxOpts))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Data</legend>
<div>
<span class="label">#Html.LabelFor(model => model.TaskId)</span>
<span class="content">
#Html.DropDownListFor(
model => model.TaskId,
new SelectList(
Model.Tasks.Values,
"Id",
"DisplayFields",
Model.Tasks.StartValue
),
Model.Tasks.Message
)
</span>#Html.ValidationMessageFor(model => model.TaskId)
</div>
<p><input type="submit" value="Add Work Completed Data" /></p>
</fieldset>
}
</div>
<div id="Entry"></div>
Although the dropdownlistfor is bound to model.TaskId which is annotated with [Required] when the post button is clicked (input type="submit") and there is no value selected in the dropdownlist the post goes through instead of stopping and appending the validation message. I am not sure what to do to fix this, as it works just fine when copy pasted to a regular view. Why wont the partial view validation work?

The problem is that the validator just loads in the beginning (with $(document).ready()).
What you can do is the following (insert in the partial view):
<script>
$(function() {
$.validator.unobtrusive.parse('.Content');
});
</script>
From the given information I assume this is your problem. Hope this helps you.