I have an c# MVC application that I'm building, and I'm wondering how to display a modal, containing a please wait message, while files are being uploaded.
I've searched Goggle and this site a lot but I could use some more direct feedback.
I've created the modal in my index.cshtml but am unsure how to display it during the upload process. I tried using something like this in my submit button but it doesn't post the form then.
data-toggle="modal" data-target="#myModal"
This is my code.
Index.cshtml
<h4>Please fill out the form below and select at least one file to upload.</h4>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="row">
<div class="col-md-2">
<h5>Your Name:</h5>
</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required placeholder="John Smith">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Your Email:</h5>
</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required placeholder="test#test.com">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Your Company:</h5>
</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required placeholder="Test Company, Inc">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Choose file(s) to upload (Max 500MB):</h5>
</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input type="submit" name="submit" value="Upload" class="btn btn-primary" />
</div>
</div>
}
<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-body">
Please wait while we are uploading your files
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
Then here is my controller
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Mail;
namespace vidup.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(List<HttpPostedFileBase> files)
{
var userName = Request["uname"].ToString();
var userEmail = Request["email"].ToString();
var userCompany = Request["company"].ToString();
ViewBag.Username = userName;
ViewBag.UserCompany = userCompany;
ViewBag.UserEmail = userEmail;
int i = 0;
var path = Path.Combine(Server.MapPath("~/Uploads"), userCompany, userName, DateTime.Now.ToString("MM-dd-yyyy h-mm-tt"));
if (!Directory.Exists(path))
{
DirectoryInfo di = Directory.CreateDirectory(path);
}
foreach (HttpPostedFileBase item in files)
{
i++;
if (item != null && item.ContentLength > 0)
{
var fileName = Path.GetFileName(item.FileName);
var fullPath = Path.Combine(path, fileName);
ViewBag.Message3 = fileName;
ViewBag.Message4 = fullPath;
try
{
item.SaveAs(fullPath);
var fileCount = i + " File(s) uploaded successfully";
ViewBag.Message = fileCount;
}
catch (Exception e)
{
ViewBag.Message = e;
}
}
else
{
ViewBag.Message = "No File selected";
}
}
return View("Status");
}
}
}
finally the status.cshtml
<h2>Upload Status</h2>
<h4>Thank you, #ViewBag.UserName from #ViewBag.UserCompany</h4>
<P>Your file upload returned a status of: #ViewBag.Message</P>
<p>An Email has been sent to #ViewBag.UserEmail with the status of this upload.</p>
<br/>
Click here to upload again
The reason your submit button does not post the form anymore is because the attributes you put in it are overriding its default behaviour - you would need to add an onclick handler to it to also start the form submit in addition to the modal show. Give your submit button an ID and give your form an ID.. after that its a straightforward onclick method
$('buttonid').on('click', function()
{
$('#formid').submit();
});
This tells your button to submit the form whenever it is clicked
Related
I have an Index page like below and on button click I have some code to save data into database and then it goes on details page.
But I the code should go to the details page only after completing the database save operation; I want to show a loader image until then; how can I do this?
Currently I'm using begin post to post method and bind all model not using any ajax call. How can I show loader image and render before process complete to details page?
Index.cshtml
#model Dev.Models.DeviceReg
#using (Html.BeginForm("AddAsync", "Home", FormMethod.Post))
{
<div class="panel panel-primary">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h4 id="aa">Name</h4>
<label>Select</label>
<table>
<tr>
<td>
#Html.DropDownListFor(m => m.Name, (SelectList)ViewBag.Name, "---Select Name---")
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Model</h4>
<label>Select</label>
<table>
<tr>
<td>
#Html.DropDownListFor(m => m.Type, (SelectList)ViewBag.TypeName, "---Select Type---")
</td>
</tr>
</table>
</div>
</div>
<div class="panel-footer" align="left">
<button type="submit" id="save" class="btn btn-success">
<span class="glyphicon glyphicon-arrow-right"></span> save
</button>
</div>
</div>
}
HomeController.cs
public async Task<ActionResult> AddAsync(DeviceReg deviceRegistration)
{
foreach (var deviceId in collection)
{
// save device information into database
Models.Device newDevice = new Models.Device()
{
Id = Guid.NewGuid(),
DeviceTypeId = deviceRegistration.DeviceType,
PlatformId = deviceRegistration.PlatformType,
DeviceId = deviceId,
};
_repository.InsertDevice(newDevice);
_repository.Save();
}
return View("Details", deviceRegistration);
}
Details.cshml
#model Dev.Models.DeviceReg
<body style="background-color:black">
<div class="panel panel-primary">
<div class="panel-heading" align="center">
<h2 class="panel-title">Details</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h3><label>Current Data</label></h3>
<br />
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Name</h4>
<label>#Model.Name</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Type</h4>
<label>#Model.TypeName</label>
</div>
</div>
<hr />
<br />
<label>Your process is running.</label>
<br />
<div class="row">
<div class="col-md-6">
<h3><label>Status</label></h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="clear: both">
<h2 style="float: left">10</h2>
<h6 style="float: right">Active Number</h6>
</div>
</div>
</div>
</div>
</div>
</body>
Well, if you need to show loader while post form is submitting, you can use javascript functions to show it, like
#using (Html.BeginForm("AddAsync", "Home", FormMethod.Post, new { onsubmit = "showLoader(this);" }))
{
...
}
plus JS
<script>
var showLoader = function(form){
$("<div />").css({
'position' : 'fixed',
'left' : 0,
'right' : 0,
'bottom' : 0,
'top' : 0,
'background' : '#0020ff36',
'z-index' : '99',
'text-align' : 'center'
}).appendTo($("body"))
.append(
$("<img />").attr("src", "https://mir-s3-cdn-cf.behance.net/project_modules/disp/35771931234507.564a1d2403b3a.gif")
);
}
</script>
or by jquery event, like
<script>
$("form").submit(function(){
//show loader
});
</script>
example of this code https://dotnetfiddle.net/gfEVSE
But, regarding to your clarification of the issue in comments, it's impossible to show Details page with progress of saving without Javascript or another additional requests.
Example without ajax but with aditional requests every N seconds
[HttpPost]
public ActionResult AddAsync(SampleViewModel deviceRegistration)
{
Task.Run(()=>
{
//Saving to DB
});
return RedirectToAction("Details", id = deviceRegistration.id);
}
public ActionResult Details(int id)
{
var isObjectExistInDb = checkIfExistInDb(id);
if (!isObjectExistInDb){
return View("ShowLoader", id);
}
return View(object);
}
where in ShowLoader.cshtml you need to reload page every N seconds.
With ajax it will be more clear, pretty code. Please, let me know, if you need example with ajax :)
I am very new in MVC and I am trying to upload a file using file uploader (I am using ExcelDataReader package for this) which I was able to but the issue is I am trying to handle the possible errors while uploading a file. In other words, I want to display all my error messages together like in ValidationSummary. And, I came to realize that ValidationSummary works only for ModelState error or property error. Similarly, I am trying to display all error messages from my controller to the view. Can any of you tell me or redirect me how to handle it?
Following is code for my controller and view.
public ActionResult Upload(HttpPostedFileBase file, int? grp = null)
{
try
{
blah blah blah
return RedirectToAction("Index");
}
catch(Exception ex)
{
if (ex is DbEntityValidationException)
TempData["Msg"] = "file exceeded the allowed character length.";
if (ex is HeaderException)
TempData["Msg"] = "corrupted";
if (ex is OutOfMemoryException)
TempData["Msg"] = "too large!";
else
TempData["Msg"] = "Error" + error;
return RedirectToAction("Index");
}
}
.
<div class="col-md-12 well" id="upload">
#using (Html.BeginForm("ActionXYZ", "ControllerABC", FormMethod.Post, new { #enctype = "multipart/form-data" }))
{
<div class="form-horizontal">
#if (!string.IsNullOrWhiteSpace(ViewBag.Message))
{
<div class="col-md-12 alert #(ViewBag.Message.Contains("success") ? "alert-success" : "alert-danger")">
<h2>#ViewBag.Message</h2>
</div>
}
<div class="form-group ">
<div class="col-md-2 text-right">
<label class="control-label">Submit File:</label>
</div>
<div class="col-md-8">
<label class="btn btn-default btn-file form-control">
<input type="file" id="file" name="file" required="required">
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Upload" class="btn btn-default" />
</div>
</div>
</div>
}
</div>
I have a partial view inside another partial view which, when first running the application loads as expected, but when you click to reload the view to push a model into it, it then renders as it's own completely separate view as if it weren't a partial.
I'm calling it inside an Ajax Form like so (On the Action link click, the _GetSearchModal method):
<div id="modelSearch">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-search"></i> Search by Model / Manufacturer
</h3>
</div>
<div class="panel-body">
#using (Ajax.BeginForm("_GetSearch", "Home", new AjaxOptions() {UpdateTargetId = "modelSearch"}))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.TextBox("search", null, new {id = "name", #class = "form-control", placeholder = "Please enter a manufacturer or model"})
<span class="input-group-btn">
<button id="search" class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
if (Model != null)
{
<div id="searchResults" class="fade-in two">
#foreach (var s in Model)
{
<div class="result">
#switch (s.ResultType)
{
case "Man":
#s.Manufacturer
break;
case "Mod":
#Html.ActionLink(s.Manufacturer + Html.Raw(s.Model), "_GetSearchModal", "Home", new {id = s.MachineId}, new {toggle = "modal", data_target = "#MachineModal"})
<img src="~/Images/General/Tier/#(s.TierId).png" alt="Tier #s.TierId"/>
break;
}
</div>
}
</div>
}
}
</div>
</div>
</div>
<!-- Product Modal -->
<div class="modal fade" id="MachineModal" tabindex="-1" role="dialog" aria-labelledby="MachineModalLabel">
#Html.Partial("_SearchModal", new MachineModal())
</div>
And the view itself should load a different view model (MachineModal):
#model SpecCheck.Portals.Web.UI.ViewModels.MachineModal
#if (Model != null)
{
<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="MachineModalLabel">#Model.Manufacturer #Model.Model</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="~/Images/#Model.Manufacturer/logo.png" alt="#Model.Manufacturer" /><br />
Wiki
</div>
<div class="col-md-6">
#Model.Catagory1 | #Model.Category2<br /><br />
<span class="modal-em">Region: </span> #Model.Region<br />
<span class="modal-em">Status: </span>#Model.Status<br />
<span class="modal-em">Spec Date: </span>#Model.SpecDate
</div>
</div>
</div>
<div class="modal-footer">
View
Quick Compare
Compare
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
}
And the action to do this in the "Home Controller" is:
public ActionResult _GetSearchModal(string machineId)
{
using (var db = new SpecCheckDbContext())
{
MachineModal machine = new MachineModal();
var searchHelper = new SearchHelper(db);
//Get Machine Details
var dbResults = searchHelper.SearchModal(Convert.ToInt32(machineId));
machine.Model = dbResults.Model;
machine.Catagory1 = dbResults.Catagory1;
machine.Category2 = dbResults.Category2;
machine.Manufacturer = dbResults.Manufacturer;
machine.Region = dbResults.Region;
machine.SpecDate = dbResults.SpecDate;
machine.Status = dbResults.Status;
machine.MachineId = dbResults.MachineId;
machine.ManufacturerId = dbResults.ManufacturerId;
var model = machine;
return PartialView("_SearchModal", model);
}
}
First thing I checked was the scripts, they're all in place when the layout page loads so it's not a script issue. Not sure what to change to even try at this point so any suggestions welcome.
In the ajax form:
_GetSearch => _GetSearchModal(name of the action)
Try to return machine to the partial view? Maybe see in the View hierarchy, is there is second _SearchModal partial view, that gets returned?
I have an app that should accept 4 parameters from a form post which I am doing in my Index.cshtml class. I have my controller set to return a a csv file once it queries a database. I am using a form post and not sure what I am missing, because it is not sending any data to my controller in order to process the query and download the file.
This is my HTML
<div id="engagementForm" class="col-lg-offset-4">
#using (Html.BeginForm ("GetClientList", "Home", FormMethod.Post) )
{
<div class="form-horizontal" role="form">
<div class="form-group" id="marketSelection">
<label class="control-label col-sm-2" name ="marketGroup" id="marketGroup">Engagement Market:</label>
<div class="col-lg-10">
<input id="mrkGroup">
</div>
</div>
<div class="form-group" id="officeSelection">
<label class="control-label col-sm-2" name ="engagementOffice" id="engagementOffice">Engagement Office:</label>
<div class="col-sm-10">
<input id="engOffice">
</div>
</div>
<div class="form-group" id="partnerSelection">
<label class="control-label col-sm-2" Name ="engagementpartner" id="engagementpartner">Engagement Partner:</label>
<div class="col-sm-10">
<input id="engPartner">
</div>
</div>
<div class="form-group" id="statusSelection">
<label class="control-label col-sm-2" Name ="engagementStatus" id="engagementStatus">Engagement Status:</label>
<div class="col-sm-10">
<input id="engStatus">
</div>
</div>
<button class="k-button" type="submit" id="searchButton">Create Speardsheet</button>
</div>
}
This is my Controller
public ActionResult GetClientList(int? marketGroup, int? engagementOffice, int? engagementpartner, int? engagementStatus)
{
List<Engagement> QueryResult = PMService.GetRequestedEngagments(marketGroup, engagementOffice, engagementpartner, engagementStatus);
var writetofile = PMService.BuildCsvString(QueryResult);
var bytefile = Encoding.UTF8.GetBytes(writetofile);
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", "attachment;filename=SqlExport.csv");
Response.Charset = "";
Response.ContentType = "application/text";
Response.Output.Write(writetofile);
Response.Flush();
Response.End();
return View();
}
None of your inputs have name attributes:
<input id="mrkGroup">
So the browser has no way of identifying them in the key/value pairs of POST values. Simply add some names:
<input id="mrkGroup" name="marketGroup">
Side note: Returning a FileResult object would be vastly preferred over directly writing to the Response output in MVC. You'll find it a lot easier to debug and test. Writing to the output and returning a view seems... error-prone.
I'm fairly new to asp .net MVC, I've got a modal wish accepts a username, email address, comments, and also has a submit button. I'm looking create the submit functionality such that when it's pressed it'll send an email.
I've had passed experience sending emails in c# no problem, the troubles I'm having is linking the two together.
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact Tech Site</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
Email Code
var SMTP_USERNAME = User.EmailUsername;
var SMTP_PASSWORD = EncryptionHelper.Decrypt(User.EmailPassword);
Mail.Subject = Subject;
Mail.Body = EmailText;
foreach (var to in SelectedUsers)
{
foreach (var contactMethod in to.ContactMethods.Where(x => x.Primary && x.Channel == ContactMethod.Channels.Email))
{
Mail.To.Add(contactMethod.Value);
}
}
Mail.From = new MailAddress(SMTP_USERNAME, User.FullName());
//Server
var HOST = unitOfWork.SettingRepository.GetString(KnownKeys.SMTPServer);
//Port
var PORT = int.Parse(unitOfWork.SettingRepository.GetString(KnownKeys.SMTPPort));
// Create an SMTP client with the specified host name and port.
var emailSent = false;
using (SmtpClient client = new SmtpClient(HOST, PORT))
{
// Create a network credential with your SMTP user name and password.
client.Credentials = new System.Net.NetworkCredential(SMTP_USERNAME, SMTP_PASSWORD);
// Use SSL when accessing Amazon SES. The SMTP session will begin on an unencrypted connection, and then
// the client will issue a STARTTLS command to upgrade to an encrypted connection using SSL.
client.EnableSsl = true;
// Send the email.
try
{
client.Send(Mail);
emailSent = true;
}
catch (Exception ex)
{
MessageBox.Show("Error message: " + ex.Message);
}
}
Create a model -
public class EmailViewModel
{
public string Username { get; set; }
public string Email { get; set; }
public string Comments { get; set; }
}
And then create your controller -
public class HomeController : Controller
{
public ActionResult GetEmailForm()
{
return View();
}
public ActionResult SubmitEmail(EmailViewModel model)
{
var result = SendEamil(model);
return View();
}
private bool SendEamil(EmailViewModel model)
{
// Use model and send email with your code.
return true;
}
}
Basically GetEmailForm action will return you a view with form -
#model MvcApplication1.Controllers.EmailViewModel
#{
ViewBag.Title = "GetEmailForm";
}
<h2>GetEmailForm</h2>
<link href="../../Content/bootstrap.css" rel="stylesheet" />
#using (Html.BeginForm("SubmitEmail", "Home", FormMethod.Post))
{
<div id="contact">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact Tech Site</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Username, new { #placeholder = "Full Name"})
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Email, new { #placeholder = "you#example.com"})
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
#Html.TextAreaFor(m => m.Comments, new { #placeholder = "Comments"})
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
}
When you enter data and click on submit, it will post the viewmodel with data to SubmitEmail action of same controller.
Output of the page is as shown below, sorry for styles, i have no time so removed some of the styles.
When you enter data and click on submit, you get data as shown below -
Once you have the data, you can use that in your private method SendEmail (which will have your code) to send email.
Check the MSDN site for information on how to create a form, it will get submitted when the user presses the submit button. Back in yoru controller add a second version of your method with the HttpPost attribute and give it a parameter instance of your model, MVC will take care of the mapping for you. See BUILDING ASP.NET MVC FORMS WITH RAZOR for more details.
Call a action method From your Email Controller thru a ajax call.From the below Code Snippet you will get an idea how to do it.
$('#btnSubmit').on('click', function () { //Ur Button
$.ajax({
type: "POST",
url: "/EmailController/SendEmailAction",
data: "{Email:" + $("#contact-email").val() +"}", // Reading from extboxes and Converting to JSON for Post to EmailController Action
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
//alert message
//Close the Modal
}
});
});
And In C# level in youecontroller
public JsonResult _SendEmail(EmailViewModel model)
{
//Here your code to send Email
}
I hope now you will get an idea how to go about it.
I think you do not require a form and submit button to send an email from a bootstrap modal.