I'm using ASP.NET MVC4 in order to develop an intranet application. One of the main features is to allow the user to upload files which will be stored in my database. In order to do that, I'm using jQuery. However, I have no idea what I have to do to manipulate the uploaded files. I already know that I have to manipulate them into the correspondent controller but after having read some tips on the internet, I just can't see how I am suppose to do.
Here is my view :
#model BuSIMaterial.Models.ProductAllocationLog
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>ProductAllocationLog</legend>
<div class="editor-label">
Date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Date, new { #class = "datepicker"})
#Html.ValidationMessageFor(model => model.Date)
</div>
<div class="editor-label">
Message :
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Message)
#Html.ValidationMessageFor(model => model.Message)
</div>
<div class="editor-label">
Allocation :
</div>
<div class="editor-field">
#Html.DropDownList("Id_ProductAllocation", String.Empty)
#Html.ValidationMessageFor(model => model.Id_ProductAllocation)
</div>
<div class="demo" style="float:left; margin-top:5px;">
<div id="aupload" style = "border:2px dashed #ddd; width:100px; height:100px; margin-right:10px; padding:10px; float:left;"></div>
<div id="uploaded" style = "border: 1px solid #ddd; width:550px; height:102px; padding:10px; float:left; overflow-y:auto;"></div>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I'm absolutly not asking for pre-made code samples but just for a way to proceed. It would be very kind.
There are three things you need to do. First, add an image upload field to your view:
<input type="file" name="file-upload" />
..make your form 'multipart'..
#using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
}
...then in your controller, access the file via the 'Files' collection on the request object:
Request.Files["file-upload"];
If you wish to submit the form with ajax/jquery, then there is a little more work to do to serialize the files. This post will help you with this: Sending multipart/formdata with jQuery.ajax
#model MVCDemo.Models.tbl_Images
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>ProductAllocationLog</legend>
<div class="editor-label">
Date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Date, new { #class = "datepicker"})
#Html.ValidationMessageFor(model => model.Date)
</div>
<div class="editor-label">
Message :
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Message)
#Html.ValidationMessageFor(model => model.Message)
</div>
<div class="editor-label">
Allocation :
</div>
<div class="editor-field">
#Html.DropDownList("Id_ProductAllocation", String.Empty)
#Html.ValidationMessageFor(model => model.Id_ProductAllocation)
</div>
<div class="demo" style="float:left; margin-top:5px;">
<div id="aupload" style = "border:2px dashed #ddd; width:100px; height:100px; margin-right:10px; padding:10px; float:left;"></div>
<div id="uploaded" style = "border: 1px solid #ddd; width:550px; height:102px; padding:10px; float:left; overflow-y:auto;"></div>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Related
I have the following code in a custom plugin in NopCommerce v3.8.
#using Nop.Web.Framework;
#using Nop.Core;
#using System.Linq;
#using Nop.Web.Framework.UI;
#using Nop.Web.Framework;
#using Nop.Core.Infrastructure;
#model Nop.Plugin.Widgets.PromoSlider.Domain.PromoSliderRecord
#{ Layout = "_AdminLayout.cshtml"; }
<div class="content">
<div class="form-horizontal">
<div id="slider-edit" class="nav-tabs-custom">
<ul class="nav nav-tabs">
#Html.RenderBootstrapTabHeader("Slider", #T("Slider"), true)
#Html.RenderBootstrapTabHeader("Images", #T("Images"))
</ul>
<div class="tab-content">
#Html.RenderBootstrapTabContent("Slider", Sliders(), true)
#Html.RenderBootstrapTabContent("Images", Images(), false)
</div>
</div>
</div>
</div>
#helper Sliders()
{
using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div>
<div class="adminData">#Html.HiddenFor(m => m.PromoSliderId)</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.PromoSliderName)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.PromoSliderName)
#Html.ValidationMessageFor(m => m.PromoSliderName)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.IsActive) </div>
<div class="col-md-9">
#Html.EditorFor(m => m.IsActive)
#Html.ValidationMessageFor(m => m.IsActive)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.Interval)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.Interval)
#Html.ValidationMessageFor(m => m.Interval)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.Wrap)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.Wrap)
#Html.ValidationMessageFor(m => m.Wrap)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.PauseOnHover)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.PauseOnHover)
#Html.ValidationMessageFor(m => m.PauseOnHover)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.ZoneName)</div>
<div class="col-md-9">
#Html.DropDownListFor(m => m.ZoneName, new SelectList(
new List<string>() {
"producdivetails_top",
"categorydetails_after_breadcrumb",
"home_page_top"
}))
#Html.ValidationMessageFor(m => m.ZoneName)
</div>
</div>
<div class="pull-right">
<button type="submit" name="save" class="btn bg-blue">
<i class="fa fa-floppy-o"></i>
#T("DERP")
</button>
</div>
</div>
</div>
</div>
}
}
#helper Images()
{
if (Model.PromoSliderId > 0)
{
#Html.Action("ManagePromoImages", new { PromoSliderId = Model.PromoSliderId })
}
else
{
<p>Please create and save a slider first.</p>
}
}
Submit button doesnt fire at all, reason can be found by looking at the generated source.
<div class="content">
<div class="form-horizontal">
<div id="slider-edit" class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a data-tab-name="Slider" data-toggle="tab" href="#Slider">slider</a></li>
<li class=""><a data-tab-name="Images" data-toggle="tab" href="#Images">images</a></li>
</ul>
<div class="tab-content">
<form action="/PromoSlider/CreateUpdatePromoSlider" method="post"></form><div class="tab-pane active" id="Slider"><input name="__RequestVerificationToken" type="hidden" value="uH2GbG4t6n0dDyBs79d6GQZTorBRpgWFCFithR77gSkAUYvPkMecNIwYtkEGyayid97gmdQp-isUUkMq1M7qSpeYOzwLGW-9WtUIxggkBd-0gATnIt5CvfEtUpjqwnl90" /> <div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div>....
As you can see for some mad reason it decideds to create the form, then close it and input all the #helper html code including the submit button, after the form.
My question, Can you still use
#Html.BeginForm
inside of the
#Html.RenderBootstrapTabHeader
Really would like to get this working in 3.8 thanks.
The only way which I can offer now is to use <form></form> tag with required parameters to create a form inside #helper {}.
We have created an appropriate issue to investigate this problem:
https://github.com/nopSolutions/nopCommerce/issues/1840
i have mvc project to register new student and give him courses and degree,etc, as shown in the database(i use entity framework) database of the project
. the edit view code is :
#model IList<HighStudy.Models.Grade>
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" align="center">Student Info</h3>
</div>
<div class="panel-body">
<div class="col-lg-4">
<p>Name: #Html.DisplayFor(model => model[0].Student.Name)</p>
<p>Level: #Html.DisplayFor(model => model[0].Student.Level)</p>
</div>
<div class="col-lg-4">
<p>Department: #Html.DisplayFor(model => model[0].Student.Department)</p>
<p>Study Type: #Html.DisplayFor(model => model[0].Student.StudyType)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" align="center">Course 1</h3>
</div>
<div class="panel-body">
<ul class="list-group">
#for (var i = 0; i < Model.Count; i++)
{
if (Model[i].CourseNumber == 1)
{
if (Model[i].Mark == "A" || Model[i].Mark == "B")
{
<li class="list-group-item list-group-item-success">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</li>
}
else
{
<li class="list-group-item list-group-item-danger">
<div class="row">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</div>
</li>
}
}
}
</ul>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" align="center">Course 2</h3>
</div>
<div class="panel-body">
<ul class="list-group">
#for (var i = 0; i < Model.Count; i++)
{
if (Model[i].CourseNumber == 2)
{
if (Model[i].Mark == "A" || Model[i].Mark == "B")
{
<li class="list-group-item list-group-item-success">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</li>
}
else
{
<li class="list-group-item list-group-item-danger">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</li>
}
}
}
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="Save" class="btn btn-default" />
</div>
}
<div class="col-lg-offset-0">
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and in the controller code for the edit view is :
edit view code in the controller
. when it reach db.Entry(g).State = System.Data.Entity.EntityState.Modified;
it goes to catch block!!
any help will be useful, thanks in advance.
I believe you should iterate over your collection to add each object to the context, and set it to Modified.
foreach(grade in g)
{
db.Entry(grade).State = EntityState.Modified;
}
db.SaveChanges();
You must do SaveChanges outside the foreach statement
db.Entry(g).State = System.Data.Entity.EntityState.Modified;
In the above code you are getting g from another object, you need to originate it from the same db object which you are using to change the State
another things could be the list, I think state of List can't be modified altogether.
consider doing something like this
foreach (var item in g)
{
db.Set<Grade>().Attach(item);
db.Entry<Grade>(item).State = EntityState.Modified;
db.Configuration.ValidateOnSaveEnabled = false;
}
db.SaveChanges();
Recently gone through the same error, and foreach saved my life. Not sure if its a very clean way to do it.
SOLVED
my current exception was :
( Unable to update the EntitySet - because it has a DefiningQuery and no element exists in the element to support the current operation
steps that solve it :
delete all duplicate #html.hiddenfor(model=> model.StudentID) in the edit view
Right click on .edmx file and chose open with xml editor
search for DefiningQuery and Remove it, yes Remove it
search for ( store:Schema="dbo" ) and rename it to ( Schema="dbo" )
these were the steps that saved my life, thank you all my friends for help, i really appreciate your help
I've been working on asp.net mvc.I ran into a problem.I have a textbox which is multiline.I want to increase it's height.I've tried using #html.raw method and also tried to add inline style using new{styles:} in Html.EditFor.Nothing worked.So,How can I do that ?Here is my View
#model CTCFremont.Models.eMail
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#PrayerRequest").css("height", 300);
$("#PrayerRequest").css("width", 200);
});
</script>
<h2>Submit Your Prayer Request</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>eMail</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Request)
</div>
<div class="editor-field" >
#Html.EditorFor(model => model.Request,Html.Id("PrayerRequest"))
#Html.ValidationMessageFor(model => model.Request)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Let me know how to deal with this..
Not sure which editor you want to use a textarea for, but just use code like the following to specify a height in CSS styles.
#Html.TextAreaFor(x => x.Request, new {#style = "height: 30px;"})
keep getting on line 25 <div id="ajaxDiv">
The "div" element was not closed. All element must be either
self-closing or have a matching end tag.
any ideas why? none of the other answers on SO have worked for me.
#model MvcMovie.Models.Vote
#{
ViewBag.Title = "Match";
}
<h2>Edit</h2>
<div>
#Ajax.BeginForm("submitVote", "vote", new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
UpdateTargetId = "ajaxDiv"
}
)
</div>
<div id="ajaxDiv">
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Vote</legend>
#Html.HiddenFor(model => model.ID)
<div class="editor-label">
#Html.LabelFor(model => model.Celeb1ID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Celeb1ID)
#Html.ValidationMessageFor(model => model.Celeb1ID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Celeb2ID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Celeb2ID)
#Html.ValidationMessageFor(model => model.Celeb2ID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Celeb1Votes)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Celeb1Votes)
#Html.ValidationMessageFor(model => model.Celeb1Votes)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Celeb2Votes)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Celeb2Votes)
#Html.ValidationMessageFor(model => model.Celeb2Votes)
</div>
<p>
</fieldset>
<button type="submit" id="submitVote" name="button" value="v1">Vote Celeb 1</button>
<button type="submit" id="submitVote" name="button" value="v2">Vote Celeb 2</button>
</fieldset>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Remove the second </fieldset> near to </div>. It is messing up your tags.
And also close the <p> tag you have above the wrong </fieldset> tag.
I'm having this issue in which I have a log in screen and a register screen in different cshtml files, but the register view is called as a #Html.Partial. The code in the log in screen is as follows:
<div class="panelLogIn left #if (ViewBag.register) { Write("hidden"); }">
#using (Html.BeginForm()) {
<div>
<div class="validationMessage" style="padding-bottom:10px;">#Html.ValidationMessage("loginFailed")</div>
<div class="field">
<span class="textOverField absolute em1-2" style="top:6px;left:4px;">User</span>
#Html.TextBoxFor(a => a.UserName, new { #class = "textField" }) <div class="absolute validationMessage">#Html.ValidationMessageFor(u => u.UserName)</div>
</div>
<div class="field relative">
<span class="textOverField absolute em1-2" style="top:6px;left:4px;">Password</span>
#Html.PasswordFor(a => a.Password, new { #class = "textField" }) <div class="absolute validationMessage">#Html.ValidationMessageFor(u => u.Password)</div>
</div>
<div class="em0-9" style="margin-bottom: 20px;">
<input class="submitButton cursorHand" style="margin-top: 10px;" type="submit" value="Enter" />
</div>
<div class="em0-9">
<span class="guestLink bold linkBlue underline cursorHand">Register Free</span>
</div>
</div>
}
</div>
<div class="panelGuest left #if (!ViewBag.register) { Write("hidden"); }">
#Html.Partial("RegisterUser", Model.NewUser)
</div>
And the Register view is as follows:
#using (Html.BeginForm("Register", "Account"))
{
/* The text boxes and form elements */
<div class="em0-9" style="margin-bottom:20px;">
<input class="submitButton cursorHand" style="margin-top:10px;" type="submit" value="Register" />
</div>
}
Basically, the issue is that when I try to Register a new user, it redirects me to localhost/Account/Register and when I go back to the LogIn screen (which is in the same view) I can't call any other action aside from the register one.
Any help with this will be greatly appreciated.
Try fully specifying the action of your first Html Form, as you have done in the Partial:
#using (Html.BeginForm("Index", "Account")) {
//
}
You should probably have a different view for resgister. It looks like you have one view which contains the login box(username / password fields) & also new user registration fields.
but the register view is called as a #Html.Partial
If you are familiar with user controls in the web forms programming model, Html partials would be somewhat similar to user controls.
So code in login screen would be just
<div class="panelLogIn left #if (ViewBag.register) { Write("hidden"); }">
#using (Html.BeginForm()) {
<div>
<div class="validationMessage" style="padding-bottom:10px;">#Html.ValidationMessage("loginFailed")</div>
<div class="field">
<span class="textOverField absolute em1-2" style="top:6px;left:4px;">User</span>
#Html.TextBoxFor(a => a.UserName, new { #class = "textField" }) <div class="absolute validationMessage">#Html.ValidationMessageFor(u => u.UserName)</div>
</div>
<div class="field relative">
<span class="textOverField absolute em1-2" style="top:6px;left:4px;">Password</span>
#Html.PasswordFor(a => a.Password, new { #class = "textField" }) <div class="absolute validationMessage">#Html.ValidationMessageFor(u => u.Password)</div>
</div>
<div class="em0-9" style="margin-bottom: 20px;">
<input class="submitButton cursorHand" style="margin-top: 10px;" type="submit" value="Enter" />
</div>
<div class="em0-9">
<span class="guestLink bold linkBlue underline cursorHand">Register Free</span>
</div>
</div>
}
</div>
You can have a separate register view in which you can include your register partial.
Hope this helps.