Please explain me how to create update panel in ASP.NET MVC4 application. I looked for many blogs... but can not find any useful way.
This is my view
How I can separate these actions in same view?
Your two panels don't allow the user to switch between one or the other so I assume that you have an "intro" view with the option to either Sign in or Register. Right? In that case there is no real need for client side panel switching using Javascript/Ajax. Your "intro" view can pass a parameter to the controller action defining whether it needs a Sign In or Register view back.
For instance:
// RouteConfig.cs
routes.MapRoute(
name: null,
url: "login-register/{action}",
defaults: new { controller = "Authentication"},
constraints: new { action = #"(SignIn|Register)" }
);
// AuthenticationController.cs
public ActionResult SignIn()
{
...
return View(); // Will return the Authentication\SignIn.cshtml view
}
public ActionResult Register()
{
...
return View(); // Will return the Authentication\Register.cshtml view
}
Update panel does not really exist in ASP.NET MVC. It used to be there in ASP.NET Web form develeopment world before people actually realized it is better to use hand written jQuery ajax for doing the partial page update.
You may use jQuery ajax methods to post your form data to an action method and do partial page update to the page as needed. You may also consider using Partial view (to return a part of a page) as required.
In your case you can create 2 partial views for Sign in and Register and include those in your main view, to make your code more reusable.
<h1>Login or Register</h1>
<div>
#Html.Partial("Login")
</div>
<div>
#Html.Partial("Register")
</div>
Related
I have this contact form which I want to use on two pages (two views) in MVC 5.x (razor viewengine) So I have put the form in an partialview called _Contact and I have read that RenderAction is the best approach if you do not have the required data for the partialview in your model and if it is more standalone (seperate from the rest of the view)
So I call it like this:
#{ Html.RenderAction("SendMail", "Uk");}
My Uk controller has these two methods:
[HttpGet]
public PartialViewResult SendMail()
{
return PartialView("_Contact");
}
[HttpPost]
public PartialViewResult SendMail(FormCollection fc)
{
// send mail using values out of the form (sorry did not feel like building a complete model for it
ViewBag.Succeed = true;
// if smtpclient could not reach server etc. it returns false
return PartialView("_Contact");
}
it all works, but the PartialView is only rendered, not on the placeholder where i call the RenderAction. It works all great, but after the post it just displays the partial view and not the "parent view" and the shared layout view etc. I hope that I made myself clear. Please let me know if I need to add more info.
This is the BeginForm from my shared view:
using (Html.BeginForm("SendMail", "Uk", FormMethod.Post))
It will not work as expected for your current code, because when you post the form, it returns Partial View not complete View. If you want to get only partial view then you have to submit your form via Ajax.
In ajax's success handler you will get HTML of your partial view and that you can put in a DIV tag of partial view container.
This link will give you a better idea about Posting Partial View via Ajax.
ASP.NET MVC Partial view ajax post?
i am new in mvc. due to lack of knowledge i am not being able to do one thing.suppose i have view Index.cshtml and this view reside in home folder. i have register folder in home folder and in register folder there is view called register.cshtml. i have another folder called catalog in home folder. when i will run my application then by default Index view will render and there will be two button or two link button. one is button text is Catalog and another button text is register.
when user click on register button then register view should load and when user click on Catalog button then Catalog view should load. how could i do this ? what kind of code i need to write and what kind of code i need to write for mapping in global.asax file ?
another question is that how could i pass my model or view model too when navigate from one view to another view.
looking for help & concept with sample code. thanks
Considering your question, I've come up with the idea that your knowledge about web applications comes from ASP.NET that folders are used to categorize different area in a web application. If I were right, you should map folders in ASP.NET with Controllers In ASP.NET MVC (it is not good analogy, but for starting is helpful). In this way, you would have three Controllers or one Controller with three Actions. I am going to choose second one.
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new TheViewModel();
return View(model);
}
public ActionResult Register()
{
return View();
}
public ActionResult Catalog()
{
return View();
}
}
View:
#model MvcApplication1.ViewModels.TheViewModel
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#Html.ActionLink("Register", "Register")
<br/>
#Html.ActionLink("Catalog", "Catalog")
Your second question has answered at Passing ViewModel in ASP.Net MVC from a View to a different View using Get
Call the appropriate /controller/action in your respective button click handlers.
In your case for the register button handler direct it to /home/register.
Have a view for your register functionality.
In the register action of your home controller return the view you want to show.
public ActionResult Register()
{
return View();
}
I have a viewpage and a partialview on that. For default request-when page is called- CultureInfo is set in base class of viewPage. I have created this custom base class which initialize the culture depending on a cookie and does some other stuff as well. There is a search button on the view page which updates a partial view on the page with Ajax call (jquery Ajax call). There is separate action for this partial view update call which returns partial view. The problem is partial view do not have any base class and when resources are displayed on partial view they are displayed for default culture and not the current culture. What would be best approach to set cultureInfo when partial view is called from jQuery Ajax call?
I have this mvc application as part (area) of bigger existing application so I can not touch session_start.
I'm not sure why you need to pass the culture around, can't you get it directly from your PartialView using a helper method?
#YourApp.CultureHelper.GetCurrentCulture()
which is just calling
public static string GetCurrentCulture()
{
return Thread.CurrentThread.CurrentCulture.Name;
}
If you are doing any work with internationalization and ASP.NET MVC I highly recommend reading through these two excellent posts by Nadeem Afana
ASP.NET MVC 3 Internationalization
ASP.NET MVC 3 Internationalization - Part 2 (NerdDinner)
Very well written and explains everything you need to know about internationalization.
You can send the culture info to your partial view as model with string array.
I guess you have handled the ajax call so I am just gonna show you the way of passing the value. The below one is your controller :
public ActionResult Index() {
return PartialViewResult("samplePartial", new string[] { "en" });
}
And this is your partial view :
#model string[]
#if(Model[0] == "en") {
#:Culture is "en"
} else {
#Culture is different than "en"
}
Also this can be also rendered inside your view as indicated below :
#Html.Partial("samplePartial", new string[] { "en" })
'Add' and 'Edit' views are typically more or less identical. How can I reuse a View so that Foos/Add and Foos/Edit/[Id] both use it? What would the actions look like?
Thanks
Simply specify the view name when calling the View() method like
public ViewResult Add() {
//...
return View("Foo");
}
public ViewResult Edit(int id) {
//...
var model = repository.get(id);
return View("Foo", model);
}
Your view will have to handle null/empty model values for the Add action or you could populate your model with default values.
You may want to consider using an Editor Template as opposed to reusing the same View. An Editor Template is a partial View that is used for editing and/or inserting data.
This would require separate views but the code would be minimal. The bulk of the code would be in the template which you would reuse for both the Add and Edit actions.
After you create your template, your Add View would look like (Razor):
#model Models.Foo
<h2>Add</h2>
<p>
#Html.EditorFor(model => model) // equivalent to EditorForModel()
</p>
And your Edit View would look like:
#model Models.Foo
<h2>Edit</h2>
<p>
#Html.EditorFor(model => model) // equivalent to EditorForModel()
</p>
I would use jQuery ajax. Clicking on Add or Edit would call serve action which will return the same PartialView (if you want to reuse it).
Then, in the success function of ajax call, you have just to put returned html (from that PartialView) into certain part of your page (or popup).
Nice and clean and no page reload...
I have a details view for courses. On that view, I have a lot of information, so I broke it up into nice JQuery UI Tabs sections and everything is great...except...
Some of the tabs have forms on them. For instance, upload course materials, add tasks, edit rosters, etc... after I submit any of the forms, I want to perform the action on my controller and then redirect to the details view again, only this time I want to be anchored to the tab that I was on before I submitted. According to the Tabs documentation, it's just as simple as adding #tabs-4 or #tabs-n to the end of the URL, but I'm not sure how to tell my controller how to do that...
so if one of my form's controller action is (simplified)
public ActionResult CreateTask(Task task)
{
db.Add(task);
db.Save();
//I want to go to /details/id + #tabs-4. How?
return RedirectToAction("Details", new { id = task.CourseID });
}
and then details is (simplified)
public ActionResult Details(int id)
{
Course course = db.GetCourse(id);
// How do I tell the view to open #tabs-4 or 3 or 2??
return View(course);
}
Additionally, I'd like to have other methods that redirect to the same details view, but instead give it a #tabs-3, #tabs-2, etc, so I assume I have to set that up in the first method, and pass it to the details action.
var url = Url.RouteUrl(new { action = "Details", id = task.CourseID });
return Redirect(url + "#tabs-4");
You can use UrlHelper.GenerateUrl method, passing your anchor as fragment.
I would add an extension method to UrlHelper to wrap a call to GenerateUrl, as it takes 10 parameters and you do not need to provide all of them manually in all the cases.