I have a scenario where I have a view with a partial that is loaded via $.get. The partial has the following code:
#model MvcApplication1.Models.CmaPartialModel
#using (Ajax.BeginForm("TestPost", new AjaxOptions { HttpMethod = "Post" }))
{
#Html.ValidationSummary()
for(var i = 0; i < Model.DataItemsWithLabels.Count; i++)
{
#Html.LabelFor(m => m.DataItemsWithLabels[i].DataName,Model.DataItemsWithLabels[i].DataName)
#Html.TextBoxFor(m => m.DataItemsWithLabels[i].DataValue)
#Html.ValidationMessageFor(m => m.DataItemsWithLabels[i].DataValue,"data value error")
#Html.TextBoxFor(m => m.DataItemsWithLabels[i].DataName)
#Html.ValidationMessageFor(m => m.DataItemsWithLabels[i].DataName,"data name error")
}
<input type="submit" value="Save" />
}
My controller action is:
[HttpPost]
public ActionResult TestPost(CmaPartialModel model)
{
if (ModelState.IsValid)
{
// code removed for quesiton
}
else
{
ModelState.AddModelError("E!", "Want to display this!");
}
return PartialView("Transaction", model);
}
Everything is working as expected in terms of client-side validation.
However, the errors that I have added in the controller are not displayed.
What am I doing wrong?
EDIT
I have altered the controller action to inlcude: ViewBag.Error = "error message";
And the partioal view to include #ViewBag.Error - This is not upating either. Is it perhaps an issue with AJAX?
The first parameter of AddModelError is important here. It is used to determine what part of your model the error applies to.
You specified E! which, given it contains something that isn't a valid C# identifier, probably doesn't map to any part of your model!
If you want to add a general error then use string.Empty as the first parameter. You should find that it displays in your validation summary.
Thaks to Dean for his help. Just wanted to make it clear that I was not using Ajax.BeginForm correctly. My view should have looked like this:
<div id="form">
#using (Ajax.BeginForm("TestPost", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "form" ))}
{
// form stuff here
}
<div>
The form was not updating with anything - not just errors as I had no UpdateTargetId
Related
My partialview:
#model Alina_2017.Models.DropDownModel
<h2>Groepen</h2>
<div>
<div>
#using (Html.BeginForm("SelectGroup", "~/Controllers/WerkvormController"))
{
#Html.DropDownListFor(x => x.selectedItem, new SelectList(ViewBag.groepen, "id", "Naam"), "Select", new { #class = "form-control" })
<input type="submit" id="zoekgroep" value="Zoeken" />
}
</div>
</div>
My main view:
#model Alina_2017.Models.WerkvormModel
#{
ViewBag.Title = "Index";
}
#Html.Partial("~/Views/DropDown/Groepen.cshtml")
//More irrelevant html
My controller:
public ActionResult Index()
{
ViewBag.groep1 = convertWerkvorm(db.Werkvormens.Where(f => f.GroepenWerkvormID == 1).ToList());
ViewBag.groep2 = convertWerkvorm(db.Werkvormens.Where(f => f.GroepenWerkvormID == 2).ToList());
ViewBag.groep3 = convertWerkvorm(db.Werkvormens.Where(f => f.GroepenWerkvormID == 3).ToList());
setViewBags();
return View();
}
[HttpPost]
public ActionResult SelectGroup(DropDownModel model)
{
// the value is received in the controller.
var selectedItem = model.selectedItem;
Debug.WriteLine(selectedItem);
return View("Index");
}
I'm getting a HTTP Error 404.0 - Not Found. Is it possible to call an action from a different controller? The reason it's in a partial view is because I'm using two different models + I'll be using the partialview in multiple other views (at least once I get it to work).
Your controller's name is wrong.
Replace
#using (Html.BeginForm("SelectGroup", "~/Controllers/WerkvormController"))
with
#using (Html.BeginForm("SelectGroup", "Werkvorm"))
You can verify the actual post URL if you view your source in browser, or check network tab in the browser's development tools.
The second argument to the BeginForm() method is simply the name of the controller, not its file:
#using (Html.BeginForm("SelectGroup", "Werkvorm"))
{
}
You can post to any server-side action from anywhere. There's no limit based on how the view is rendered because once everything is rendered it's all just client-side markup no matter where it came from.
As a learning exercise, examine the actual rendered markup in your browser's debugging tools and see the URLs created for the forms. Regardless of how the partial views are arranged, which controller returned the view, what the models are, etc... It's all just HTML in the end. You can even manually write a simple .html file with a form on it which successfully posts to a server-side ASP.NET MVC action.
I have this page that contains 2 forms one exists in the layout file and the other in the view file. The first form is for newsletter subscription (an ajax form) and its location is common in the footer of the page, that's why it's in the layout and is rendered as a partial view. I have another view of the contact us page with its own form (normal form).
My issue is when I submit the contact us form, the code also goes into the action method of the subscription form and returns a model error with JsonResult causing the whole view to be rendered as text. I only want the action method of the contact us form to be executed.
Here is the subscription form in a partial view file
#model MyApp.Models.Subscriber
#using (Ajax.BeginForm("NewsletterSubscription", "Shared", null, new AjaxOptions
{
HttpMethod = "POST",
OnBegin = "OnBegin",
OnComplete = "OnComplete",
OnFailure = "OnFailure"
}, new { id = "subscribeForm" }))
{
#Html.AntiForgeryToken()
#Html.TextBoxFor(model => model.SubscriptionEmail)
#Html.ValidationMessageFor(model => model.SubscriptionEmail)
<input id="btnSubscribe" type="submit" value="Subscribe" />
}
And this is how it's rendered in the _layout.cshtml file
#{ Html.RenderAction("NewsletterSubscription", "Shared"); }
Here's the other form in contactus view file
#using (Html.BeginForm("Index", "Contact", FormMethod.Post, new { id = "contactForm" }))
{
#Html.AntiForgeryToken()
<div class="theForm">
<div class="theFormUnit">
<p>Fullname</p>
#Html.TextBoxFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="theFormUnit">
<p>Email</p>
#Html.TextBoxFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="theFormUnit">
<p>Phone</p>
#Html.TextBoxFor(model => model.Phone)
#Html.ValidationMessageFor(model => model.Phone)
</div>
<div class="theFormUnit">
<p>Message</p>
#Html.TextAreaFor(model => model.Message)
#Html.ValidationMessageFor(model => model.Message)
</div>
<input type="submit" value="Submit" />
</div>
}
When I debug the code, first the action method of the contact us is executed then the action method of the subscription and returns an error since the email was not provided.
The subscription action method
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult NewsletterSubscription(Subscriber subscriber)
{
if (ModelState.IsValid)
{
}
else
{
return Json(new { success = false, message = "Failure Message" });
}
return Json(new { success = true, message = "Success Message"});
}
And contact us action method
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(ContactViewModel contact)
{
if(ModelState.IsValid)
{
}
else
{
}
return View(contact);
}
I tried two solutions the first one partially solved the problem and the other solved it completely.
First solution was to add the following lines in the action method of the subscription form
if (!Request.IsAjaxRequest())
{
ModelState.Clear();
return PartialView("Partial/_NewsletterSubscription");
}
Here I am checking if the request is not an ajax request, which means it's the postback request for the contact us form, in this case I clear the model state to remove the error and return a new partial view. Although this solution solved the issue but I wasn't satisfied with it because I was not convinced with the fact that action method of the subscription form gets executed with the action method of the contact us form.
So later I thought of another simple solution, which totally solved the issue and the execution doesn't go into the action method of the subscription form when submitting the contact us form.
I simply changed the action method name from "NewsletterSubscription" to "Subscribe" so instead of
#using (Ajax.BeginForm("NewsletterSubscription", "Shared", null, new AjaxOptions
I changed it to
#using (Ajax.BeginForm("Subscribe", "Shared", null, new AjaxOptions
my main (MyProfile) view contains links that when user clicks on the link the partial view loads in the div with existing data from DB that can be updated by the user.
#Ajax.ActionLink("Update 1", "Update1", new { email = #ViewBag.Email }, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "divCurrentView", InsertionMode = InsertionMode.Replace })
#Ajax.ActionLink("Update 2", "Update2", new { email = #ViewBag.Email }, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "divCurrentView", InsertionMode = InsertionMode.Replace })
<div id="divCurrentView">
</div>
Partial Views: example:
_Update1:
#model ViewModels.Update1
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.id)
#Html.LabelFor(model => model.Name)
#Html.TextBoxFor(model => model.Name)
<input type="submit" value="Update" />
}
_Update2:
#model ViewModels.Update2
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.id)
#Html.LabelFor(model => model.Website)
#Html.TextBoxFor(model => model.Website)
<input type="submit" value="Update" />
}
In the Controller:
public PartialViewResult Update1(string email)
{
var model = populate the viewmodel
return PartialView("_Update1",model);
}
public PartialViewResult Update2(string email)
{
var model = populate the viewmodel
return PartialView("_Update2",model);
}
It doesnt mean the user will click on all the links when accessing the main view.
I want to get feedback if my way is correct OR should I load all the data once when the user gets to MyProfile View and store the data in the session and when each partial view gets loaded data gets loaded from the session?
This would avoid calling the db every time partilaview gets loaded or is there a better approach?
Thanks,
UPDATE:
I tried to use Cache as suggested but the problem the data is store globally. If multiple users login and try to view/update the data, the data is identical for all of them Am I missing something?
This is what tried:
public PartialViewResult Update1(string email)
{
var cc = HttpRuntime.Cache.Get("cinfo");
Update1VM model = null;
if (cc == null)
{
model = populate the viewmodel
HttpRuntime.Cache.Insert("cinfo", model);
}
else
{
model = (Update1VM)cc;
}
return PartialView("_Update1", model);
}
Use Html.ActionLink in way you use is good solution. It makes controller simple and reuseble. You can easily add and remove views without changes in controller. It is easy to put them in diffrent view.
Generally it's more flexible solution.
If you afraid of calling the db every time you can always use some caching, but in your example it will query db only when user really need it and click it.
If you put this in one view it will be more complicated, more messy and less error prone.
I'm not so experienced using MVC. I'm dealing with this situation. Everything works well until call the HttpPost method where has all its members null. I don't know why is not persisting all the data on it.
And everything works well, because I can see the data in my Html page, only when the user submit the information is when happens this.
[HttpGet]
public ActionResult DoTest()
{
Worksheet w = new Worksheet(..);
return View(w);
}
[HttpPost]
public ActionResult DoTest(Worksheet worksheet)
{
return PartialView("_Problems", worksheet);
}
This is class which I'm using.
public class Worksheet
{
public Worksheet() { }
public Worksheet(string title, List<Problem> problems)
{
this.Title = title;
this.Problems = problems;
}
public Worksheet(IEnumerable<Problem> problems, WorksheetMetadata metadata, ProblemRepositoryHistory history)
{
this.Metadata = metadata;
this.Problems = problems.ToList();
this.History = history;
}
public string Title { get; set; }
public List<Problem> Problems { get; set; } // Problem is an abstract class
public WorksheetMetadata Metadata { get; set; }
public ProblemRepositoryHistory History { get; set; }
}
And my razor view.... the razor view shows successfully my view. I realized something rare, please note in my 5 and 6 lines that I have HiddenFor method, well if I used that, when calls HTTPPOST persists the data, I don't know why.
#model Contoso.ExercisesLibrary.Core.Worksheet
<div id="problemList">
<h2>#Html.DisplayFor(model => model.Metadata.ExerciseName)</h2>
#Html.HiddenFor(model => model.Metadata.ExerciseName)
#Html.HiddenFor(model => model.Metadata.ObjectiveFullName)
#for (int i = 0; i < Model.Problems.Count; i++)
{
<div>
#Html.Partial(Contoso.ExercisesLibrary.ExerciseMap.GetProblemView(Model.Problems[i]), Model.Problems[i])
</div>
}
</div>
UPDATE
I'm using a static class to get the view name, but as I'm testing I'm just using this Partial view
#model Contoso.ExercisesLibrary.AbsoluteArithmetic.Problem1
<div>
<span style="padding:3px; font-size:18px;">#Model.Number1</span>
<span style="padding:5px; font-size:18px;">+</span>
<span style="padding:5px; font-size:18px;">#Model.Number2</span>
<span style="padding:5px; font-size:18px;">=</span>
<span style="font-size:18px">
#Html.EditorFor(model => model.Result, new { style = "width:60px; font-size:18px;" })
#Html.ValidationMessageFor(model => model.Result)
</span>
</div>
#section Scripts {
}
And here the user do the post
#model Contoso.ExercisesLibrary.Core.Worksheet
<form method="post">
#Html.Partial("_Problems", Model)
<input type="submit" value="Continue" />
</form>
The Model Binder will 'bind' or link input fields on your view to the model. It will not bind display fields (like label), that is why you need the HiddenFor it will add an <input type="hidden" which will then be bound to the Model when you Post.
You can use 'TempData'. It is used to pass data from current request to subsequent request means incase of redirection.
This link also helps you.
TempData
SO Tempdata
Make sure your form tag looks like the following, for instance the controller name, action method, the form method and an id for the form. I am referring to the #using statement. In my case the controller name is RunLogEntry, the action method is Create and the id is form.
Normal Post from View to Controller
#using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{
<div id="main">
#Html.Partial("_RunLogEntryPartialView", Model)
</div>
}
If you want to post via Jquery, could do the following:
$.post("/RunLogEntry/LogFileConfirmation",
$("#form").serialize(),
function (data) {
//this is the success event
//do anything here you like
}, "html");
You must specify a form with correct attribute in your view to perform post action
<form action="Test/DoTest" method="post">
...
</form>
or
#using(Html.BeginForm("DoTest", "Test", FormMethod.Post)) {
...
}
The second is recommended.
Put your entire HTML code under:
#using(Html.BeginForm())
tag.
I have creatd a partial view and inside it I am using AJAx.BeginForm. In Post Edit Action Method, I am adding VIEWDATA Like this
if (ModelState.IsValid)
{
service.SaveAccount(account);
TempData["message"] = "Account has been updated successfully!";
AccountInfo accountInfo = new AccountInfo();
accountInfo.AccountStatuses = service.GetAccountStatuses();
accountInfo.AccountTypes = service.GetAccountTypes();
accountInfo.CreditTerms = service.GetCreditTerms();
return View("DisputeSubscriber", accountInfo);
}
else
{
return PartialView("_UpdateAccountDetails", account);
}
and redirecting to same partial view. In partial view, I have added like this:
#if (TempData["message"] != null)
{
<div class="Message">
I am here.
#TempData["message"]
</div>
}
but this message is not shows. this message is also inside AJAX.BeginForm. Please suggest
Do I need to redirect main view instead of partial view or there is something I am missing
You seem to be using TempData and not ViewData which is not quite the same. Also you mentioned that you are using an Ajax.BeginForm to invoke this controller action. Since this is an AJAX call make sure that you have specified an UpdateTargetId in your AjaxOptions so that the resulting partial is injected somewhere into the DOM:
#using (Html.BeginForm(new AjaxOptions { UpdateTargetId = "foo" }))
{
...
}
<div id="foo"></div>