So I'm fairly new to ASP.net MVC and have been trying to make a fileuploader, but I can't seem to get my uploaded file bound to my viewmodel. I'm trying to apply validation to the uploaded file through my viewmodel which should be doable.
My code:
View:
<div id = "PDFForm">
#using (Ajax.BeginForm("Upload", "Home", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "PDFForm",
},
new { id = "UploadForm", enctype = "multipart/form-data" }))
{
<input type="file" name="Cover" id="Cover" />
<input type="submit" value="Upload"/>
}
</div>
ViewModel:
public class UploadVM
{
[Required]
public HttpPostedFileBase Cover { get; set; }
}
Controlller action:
public ActionResult Upload(UploadVM model)
{
if(ModelState.IsValid() && model.Cover !=null)
{
//do things and return a response view
}
else
{
//return to form
}
}
I've googled around for tutorials and they seem to be able to bind the uploaded file to the viewmodel by using:
enctype = "multipart/form-data"
I can't seem to get it working so I thought you guys might be able to help me out or push me in the right direction.
Thanks in advance!
Edit: I've tried it with HTML.BeginForm() too but that doesn't seem to work either
Related
My first ever Ajax request is failing, and I'm not quite sure as to why.
I've used the MVC scaffolding in order to create a table (which uses a default #Html.Actionlink). However, I'm looking to include an 'edit' section on the same page via ajax requests.
So my table now has:
<td>
#Ajax.ActionLink("Edit", "Edit", new { id=item.OID}, new AjaxOptions {
UpdateTargetId = "editblock",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET" }
) |
As suggested here.
Within the same view i have a div defined as:
<div id="editblock">
Edit Section Here
</div>
And My controller is defined as:
public PartialViewResult Edit(int? id)
{
if (id == null)
{
return PartialView(new HttpStatusCodeResult(HttpStatusCode.BadRequest));
}
TableModel tablevar = db.TableModel.Find(id);
if (tablevar == null)
{
return PartialView(HttpNotFound());
}
return PartialView("Edit", tablevar );
}
[HttpPost]
[ValidateAntiForgeryToken]
public PartialViewResult Edit( TableModel tablevar )
{
if (ModelState.IsValid)
{
db.Entry(tablevar ).State = EntityState.Modified;
db.SaveChanges();
}
return PartialView("Edit",tablevar );
}
My "Edit.cshtml" looks like:
#model Project.Models.TableModel
<body>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
Could anyone suggest as to why this is failing, and what I should be doing instead to render this partial view onto the page (as currently it keeps redirecting to new page and not showing on 'index' screen)?
Place those scripts at the bottom of your view. By the time they execute your form isn't present (and therefore the auto-wireup fails). In general, you want <script> tags as close to the </body> tag as possible to your content is there before the script executes.
Other than that, you look fine.
I am building a page where a user can view the details of an item which s/he selected.
As part of this project, I need to show all the comments that are listed under this particular item using Ajax and partial views.
In the Controller class, I am somehow unable to pass the productID of the selected item to the partial view method. When I hard code the productID into the method, the comments show up, however when I pass it through the parameter, the method won't even trigger.
All the product details, however, show without restrictions.
I would appreciate any help. Below please find the code in my Controller
public ActionResult Index()
{
List<Product> productList = new ProductClient().GetAllProducts().ToList();
return View("Index", productList);
}
//This method works correctly. The id of the product is passed.
public ActionResult Details(int id)
{
return View(new ProductClient().GetProductByID(id));
}
// This method is not even getting triggered.
public PartialViewResult ProductComments(int id)
{
List<Comment> commentList = new ProductCommentClient().GetCommentsByProductID(id).ToList();
return PartialView("_comments", commentList);
}
This is my Details.cshtml
#Ajax.ActionLink("Product Comments", "ProductComments(" + #Model.ID + ")", new AjaxOptions
{
HttpMethod = "Get",
UpdateTargetId= "divComments",
InsertionMode = InsertionMode.InsertAfter
})
<fieldset>
<div id="divComments">
<legend>Comments</legend>
</div>
</fieldset>
Many thanks in advance.
I solved this.
#Ajax.ActionLink("Product Comments", "ProductComments", new {id=Model.ID}, new AjaxOptions
{
HttpMethod = "Get",
UpdateTargetId= "divComments",
InsertionMode = InsertionMode.InsertAfter
})
<fieldset>
<div id="divComments">
<legend>Comments</legend>
</div>
</fieldset>
I was passing the ID in the wrong manner. I hope that this would at least help somebody else.
I'm trying to implement a little ajax using unobtrusive ajax of mvc 3. Here is the code snippet:
Controller:
[HttpGet]
public ActionResult ViewEmployee()
{
return View();
}
[HttpPost]
public ActionResult ViewEmployee(EMPLOYEE model)
{
var obj = new EmployeeService();
var result=obj.FindEmployee(model);
return View("ViewEmployee", result);
}
View:
#{AjaxOptions AjaxOpts = new AjaxOptions { UpdateTargetId = "ajax", HttpMethod = "Post" };}
#using (Ajax.BeginForm("ViewEmployee", "Home", AjaxOpts))
{
#Html.LabelFor(x => x.EmployeeID)
#Html.TextBoxFor(x => x.EmployeeID)
<input type="submit" name="Find Name" value="Find Name" />
}
<div id="ajax">
#{
if (Model != null)
{
foreach (var x in Model.EmployeeName)
{
#x
}
}
else
{
#Html.Label("No Employee is selected!")
}
}
</div>
I debugged the code, its sending the employee id to the ViewEmployee method, finding the name but not being able to display the name back into the view.
I've activated the unobtrusive ajax property in web.config & imported the scripts into the view.
Whats going wrong with this? Please help.
This is simple but effective article, ask me if you have any more question! I resolved the problem! By the way, whats wrong with stackoverflow, i'm not getting no response literally!
http://www.c-sharpcorner.com/UploadFile/specialhost/using-unobtrusive-ajax-forms-in-Asp-Net-mvc3/
I am new to asp .net mvc3. I am trying to create a failrly simple blog comments section.
I have a CommentsViewModel
public class CommentsViewModel
{
public CommentModel NewComment { get; set; }
public IList<CommentModel> CommentsList { get; set; }
}
The corresponding view is like
<div id="CommentsArea">
#Html.Partial("CommentsList", Model.CommentsList)
</div>
#using (Ajax.BeginForm("Create",
"Comment",
new { id = Model.NewComment.detailsId, comment = Model.NewComment },
new AjaxOptions { UpdateTargetId = "CommentsArea" ,
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace}))
{
<div class="display-label">Add Comment</div>
<div class="display-field">
#Html.EditorFor(model => Model.NewComment.Body)
</div>
<input type="submit" value="Post" />
}
Now when user enters Post button I want the "CommentsArea" to be updated with the new comments list and also the form values to be cleared with empty text.
Here is the Post method:
[HttpPost]
public ActionResult Create(int id, CommentModel newcomment)
{
var newsItem = m_db.NewsList.Single(news => news.Id == id);
if (!string.IsNullOrWhiteSpace(newcomment.Body))
{
newcomment.detailsId = id;
newsItem.Comments.Add(newcomment);
m_db.SaveChanges();
}
return PartialView("CommentsList", newsItem.Comments);
}
Now when user clicks Post button the list gets updated properly,
but the form values are not cleared. i.e. if I posted a comment "New Comments", the comments list gets updated with "New Comments", but that text remains inside the edit box of the form.
How do I clear that text?
just call a js function on success of form submit.
#using (Ajax.BeginForm("Create",
"Comment",
new { id = Model.NewComment.detailsId, comment = Model.NewComment },
new AjaxOptions { OnSuccess="ClearInput", HttpMethod = "Post",}))
on js function render create view again
function ClearInput(){
//call action for render create view
$.ajax({})
}
I am tring to pass a RouteValueDictionary to my aspx so that I can use it as the parameters for an Ajax.BeginForm method. I load it up like so:
RouteValues = new System.Web.Routing.RouteValueDictionary();
RouteValues.Add("FindingId", thisFinding.Id);
RouteValues.Add("ReportId", thisFinding.ReportSection.ReportId);
and then add it to my model without issue. When I put it as the parameter to the BeginForm method it renders the action as this:
/SolidWaste/Finding/LoadSection?Count=3&Keys=System.Collections.Generic.Dictionary%602%2BKeyCollection%5BSystem.String%2CSystem.Object%5D&Values=System.Collections.Generic.Dictionary%602%2BValueCollection%5BSystem.String%2CSystem.Object%5D
Here is the aspx code:
(Ajax.BeginForm(Model.FormModel.Action,
Model.FormModel.Controller,
Model.FormModel.RouteValues,
new AjaxOptions {
HttpMethod = "Post",
InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
UpdateTargetId = "WindowContent",
}, new { id = FormId })) { %>
<input name="submit" type="submit" class="button" value="" style="float: right;"/>
<% } //End Form %>
Here is the View Model that represents Model.FormModel
public class FormViewModel {
public string Action { get; set; }
public string Controller { get; set; }
public string Method { get; set; }
public RouteValueDictionary RouteValues { get; set; }
}
Any idea why it is not serializing the RouteValueDictionary into the proper URL on the action? I would like to use an object here rather than build the RouteValues by hand with new { field = vale }
Ah, you are using the wrong overload. It's normal. The ASP.NET MVC team really made a mess out of this API. You gotta be careful which method you are invoking. Here's the overload that you need:
<% using (Ajax.BeginForm(
Model.FormModel.Action, // actionName
Model.FormModel.Controller, // controllerName
Model.FormModel.RouteValues, // routeValues
new AjaxOptions { // ajaxOptions
HttpMethod = "Post",
InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
UpdateTargetId = "WindowContent",
},
new Dictionary<string, object> { { "id", FormId } }) // htmlAttributes
) { %>
<input name="submit" type="submit" class="button" value="" style="float: right;"/>
<% } %>
Notice the correct overload? You were using the one that was taking routeValues and htmlAttributes as anonymous objects, except that you was passing Model.FormModel.RouteValues as a RouteValueDictionary which basically crapped your overload.
Hit F12 while hovering the cursor over the BeginForm and if you are lucky enough and Intellisense works fine for you in Razor views (which rarely happens) you will get redirected to the method you are actually invoking and realize your mistake.