I have a MVC 4 application which has a single home view. I have three link buttons and want to load three different forms dynamically based on the button click. I am using mvc partial views. So, if I click on button-1 it should load partialView-1 and should also send value-1 from the corresponding text box to partialView-1.
I am looking for mvc inbuilt approach rather than doing heavy javascript work.
You can do this like this.
A. Have different methods inside your controller returning PartialViewResult
[HttpGet]
public PartialViewResult GetPartialView1(int value)
{
return PartialView("_PartialView1"); //This view should exist in appropriate views folder.
}
B. Your buttons on the left handside should be #Ajax.ActionLink
#Ajax.ActionLink(
"Button1",
"GetPartialView1",
new {
value1 = 1},
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "righthandsidebox"
}
)
C. The UpdateTargetId = "righthandsidebox" that should be the id of the div on the right hand side. Contents of righthandsidebox will be replace by the PartialView
There is nothing built into MVC to do this as what you want to do happens on the front-end. If you want to be dynamic you have to use javascript.
If you want to avoid javascript then it can't be dynamic. You would wrap each button and value in a form and have it submit its value to the back-end and by what is passed you then you have your view render what partial you want. But this wouldn't be dynamic as want it to be.
I'm not sure what you consider as "heavy" when it comes to javscript? With jQuery what you want you do doesn't take much.
(lighter javascript work) You can either have your View place all of the partial views on the page with a class that sets them to display:none then just javascript to simple change out the class to view the partial you would like. But you have a lot of partials then you can do the following.
Or have the buttons make an `ajax call to the back-end fetching the partial that you need.
The bottom line is... if you want dynamic you need to use javascript.
Related
I'm developing Single page web application for which I will be using the MVC and knockout. In the _Layout.cshtml, I will have the menu bar using which user can view different views. When I click on the items in menu, I will be calling controller method and being a single page application, I will have to return partial view. However, I'm confused how I can load returned partial view exactly in my view area. If I use Ajax.BeginForm, I can specify the UpdateTargetID in which I need to update my partial view but as with menu item click, it will just be server method call. So I wonder how I can update the partial view inside view area?
Do you think writing following javascript function for each menu items is what I need to do?
$('#menuitemId').click( function() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/ControllerName/ActionName")',
data: objectToPass,
success: function (data) {
$('#divid').innerHTML = data; // data is partial view returned from controller
}
});
}
Also, can someone point me/share working demo/good documents of Single page web application with MVC and knockout?
That looks fine to me.
You could also make it simpler like this:
$('#menuitemId').click( function() {
$('#divid').load('#Url.Content("~/ControllerName/ActionName")' + menuItemId);
});
Hi I am trying to use MVC paging, I have created a partial view and place it in a View, to which I am passing IPagedList, now when I perform paging, I use following code
<%:Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount, new AjaxOptions { UpdateTargetId = "dv1" }).Options(o => o.Action("IndexPaging").AddRouteValue("currpage","page"))%> and IndexPaging returns PartialView, but my problem is that, on paging, I do not get to see the 2nd page data in view source. My requirement is to make it SEO friendly, so that when google crawler crawl's through my paging, it can read other page's data.
I have a controller:
public ActionResult Index()
{
return View();
}
public ActionResult Button1()
{
return View();
}
MySite/MyController/ renders the site with 3 buttons and a div.
Buttons redirect to:
MySite/Controller/button1
MySite/Controller/button2
MySite/Controller/button3
I would like that when the users clicks button1 it renders MySite/MyController/ with the content of public ActionResult Button1() in the div.
same goes for botton 2 and 3. And if the users go directly to MySite/Controller/button2 it should render the Index with ActionResult Button2 in the div from the beggining.
Is there an easy way to do this? Do i need to do ajax to replace the content of the div, or should i just make the buttons a partial view and render them on the 4 pages.
If its easy with ajax, i would like that as the page dont need to refresh, but just load in the content. But i am not sure how i would make it render the pages correctly if the user goes to MySite/Controller/button2 directly.
There are a few valid options that I see here:
Have each button load a new page with their content on it.
Include each button content as a PartialView in a single page, and use javascript to change the div content without AJAX.
Don't include any of the button contents, and load them all through AJAX.
Include the first visible button content, and load the others through AJAX (if these are static content then you can design your script to store the values so each one only has to load once.
Personally, I would try to do a combination of 1 and either 2, 3, or 4 (depending on use case). This way the basic functionality of the site works without javascript, but you can still get the benefits of jQuery/AJAX.
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.
I have an MVC Controller that runs through a process, sets some View Data, and then returns the results of this data back to the user in a View. The process time is dependent on the amount of data that is being processed. I need a good way to display an animated .gif within the View while the process is running, letting the user know that something is going on.
I've looked at various AJAX methods and partial views but still cannot find a good way to accomplish this. What I really wished I could do was have an ActionFilter that would return a View or Partial View during the OnActionExecuting event that displays this animated .gif, then once the Controller completed processsing and returned the ViewData, the view or partial view with the actual View Data could be displayed.
It also seems like jQuery would be able to provide a nice asynchronous way to call the controller action in the background and then render the View. Any help would be appreciated.
In your controller:
public JsonResult GetSomething(int id)
{
return Json(service.GetSomething(id));
}
In the view (javascript, using JQuery):
$('#someLink').click(function()
{
var action = '<%=Html.ResolveUrl("~/MyController.mvc/GetSomething/")%>' + $('#someId').val() + '?x=' + new Date().getTime();
$('#loading').show()
$.getJSON(action, null, function(something)
{
do stuff with something
$('#loading').hide()
});
});
Note that this assumes a route where 'id' comes after action. The 'x' parameter on the action is to defeat aggressive caching in IE.
In the view (markup):
<img id="loading" src="images/ajax-loader.gif" alt=""/>
<!-- use a css stlye to make display:none -->
Get loader gifs here.
Also note that you do not have to do this with Json. You can fetch other things like HTML or XML from the controller action if you prefer.