I have the following two action links on a page:
#Html.ActionLink("User List","list");
#Html.ActionLink("Admin List","admin");
On their click I want to show/hide a partial view using jQuery. Help me with solution for this.
You could use the Ajax.ActionLink helper instead:
#Ajax.ActionLink("User List","list", new AjaxOptions { UpdateTargetId = "someDiv" });
#Ajax.ActionLink("Admin List","admin", new AjaxOptions { UpdateTargetId = "someDiv" });
This assumes that the list and admin actions return partial views:
public ActionResult List()
{
return PartialView();
}
and the result of this partial view will be injected into a DOM element with id="someDiv". Also for this to work don't forget to include the jquery.unobtrusive-ajax.js script to your page
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<div id="test"></div>
#Ajax.ActionLink("User List","list", new AjaxOptions{ UpdateTargetId = "test" });
#Ajax.ActionLink("Admin List","admin", new AjaxOptions{ UpdateTargetId = "test" });
Related
I intend to call function when clicked on ActionLink and depending on the ouptput of the function would either go the next page or show alert.
When OnBegin is true in Ajax.ActionLink, it should hit the controller method and hence go to specified view. But when I click on the ActionLink, OnBegin returns true but nothing happens. I see the same page.
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
#using (#Html.BeginForm())
{
#Ajax.ActionLink("Add Document", // <-- Text to display
"AddDocument", // <-- Action Method Name
"Home", // <-- Controller Name
null,
new AjaxOptions { OnBegin = "OnBegin('AddDocument')" },
null
)
}
<script type="text/javascript">
function OnBegin(vObject) {
debugger;
return true;
}
</script>
Any help would be appreciated.
Thanks.
I think that you are using it in the wrong way. #Ajax.ActionLink will hit your controller and retrieve the content of the response but you haven't set any space to hold the response. One of the properties of AjaxOptions is UpdateTargetId which should be setted to the id tag that will hold the response.
#Ajax.ActionLink("Add Document", "AddDocument", "Home",
new AjaxOptions
{
OnBegin = "OnBegin('AddDocument')",
UpdateTargetId = "responseContent"
})
In the view put a tag to hold the response:
<div id="responseContent"></div>
The response will be inserted inside the div.
I have a controller that uses ajax.actionlink in order to get a partial view from another controller. My question is how can I use the result from that ajax partialview to fill in a textbox in my main action .
This is the view i'm working on corresponds to this view
#Ajax.ActionLink("Find location", "getzipcode",
new AjaxOptions
{
UpdateTargetId = "ajax_insert",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
});
<div id="ajax_insert">
</div>
#using (Html.BeginForm("create", "service", FormMethod.Post))
{
// fill Ajax code in this EditFor Result
#Html.EditorFor(model => model.zipcode)
}
as you can see above that ajax simply request's a partial view called getzipcode which just links to this action
public PartialViewResult getzipcode()
{
var zipco = (from s in db.servicers where s.zipcode == 32839 select s);
return PartialView("_review", zipco);
}
The ajax works correctly, im just stumped on inserting the zipcode into the EditFor box as well I tried
#Html.EditorFor(model => model.zipcode,#ajax_insert) but it did not work.
You can make use of onSuccess callback function
#Ajax.ActionLink("Find location", "getzipcode",
new AjaxOptions
{
UpdateTargetId = "ajax_insert",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnSuccess = "fillTextBox"
});
<script type="text/javascript>
function fillTextBox(){
//Use jquery to fill your text box
}
</script>
I have a problem with Ajax submit. I have a main View where I render a PartialView and inside the last one I load another PartialView. Something like this:
Main view
List of elements -> PartialView 1
Create new element -> PartialView 2 inside PartialView 1
I am using AjaxBeginForm with replace and update options:
#using (Ajax.BeginForm("Create", "MyController",
new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "form0", HttpMethod = "POST" }))
My problem is that submit works very well first time. It saves the new element and re-render the PartialView 1 ( it updates my list ). If want to submit again it will redirect me to PartialView 1.
Why is happening that and what is wrong in my code? How can I do it ?
Here's my controller action:
[HttpPost]
public PartialViewResult Create(Model viewModel)
{
viewModel.Save(viewModel.FormModel);
var newViewModel = new DefaultViewModel(viewModel.xID,viewModel.yID);
return PartialView("_DefaultPartialView", newViewModel);
}
It's ok my action returns a PartialView? It should be of type JsonResult ?
And PartialView 1:
#using (Ajax.BeginForm("CreateBehaviorLog", "BehaviorLog", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "form0", HttpMethod = "POST" }))
{
#model DefaultViewModel
#Scripts.Render("~/bundles/jquery")
<h2>Title</h2>
{ Html.RenderPartial("PartialView2", Model.ModelForPartialView2); }
<div id="listOfELements">
#foreach(var item in Model.X)
{
--list--
}
</div>
}
Thank you.
UPDATE:
I fixed this ( it was a very newbie mistake ). I'll post tomorrow my answer because now it's kinda late and I need to sleep!
So, first of all, when you make an Ajax call be sure you included everything you need. Here I mean:
Be sure to have <add key="UnobtrusiveJavaScriptEnabled"
value="true"/> in your webconfig.
Be sure you have included the script in the page.
If you are using the latest jQuery you need to change live function with on in your unobtrusive script.
Btw, if you have the problem mentioned above here is what I have done first time ( it is changed now because it's not such a good solution ) :
MainView
#using (Ajax.BeginForm("Create", "MyController",
new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "form0", HttpMethod = "POST" }))
{
RenderPartial1
RenderPartial1.2
}
RenderPartial2
..
RenderPartialN
As you can see, I've put AjaxBeginForm outside the Partial1.2 from which I submit, in the MainView. This method wasn't so good because if you need 2 forms what will you do then ?
In the end I quit using AjaxBeginForm and used HtmlBeginForm with ajax post from javascript.
I have a partial view that upon adding an item to the database needs to update.
The Index.cshtml:
#using (Ajax.BeginForm("Index", "WinEntry", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "wingrid", InsertionMode = InsertionMode.Replace}))
{
#Html.Partial("_winVenue")
#Html.Partial("_singleWin")
}
<div id="wingrid">
#Html.Partial("_wingrid")
</div>
The _singleWin has the submit button
The controller:
[HttpPost]
public ActionResult Index(Win win)
{
win.dealerId = "1234567890";
win.posterid = "chris";
win.posttime = DateTime.Now;
wem.addWin(win);
IEnumerable<Win> w = wem.getVenueWins(win.venue,win.windate);
return PartialView("_wingrid",w);
}
When the controller returns the partial view _wingrid it returns it as a new page and the behavior I am looking for is like an update panel inside the wingrid div.
Any help would be appreciated.
You already seem to be doing this thanks to the UpdateTargetId = "wingrid" option in your AJAX form. Just make sure that you clear values that you modify in your POST controller action form the modelstate. Otherwise HTML helpers could still use the old values:
[HttpPost]
public ActionResult Index(Win win)
{
ModelState.Remove("dealerId");
win.dealerId = "1234567890";
ModelState.Remove("posterid");
win.posterid = "chris";
ModelState.Remove("posttime");
win.posttime = DateTime.Now;
wem.addWin(win);
IEnumerable<Win> w = wem.getVenueWins(win.venue,win.windate);
return PartialView("_wingrid",w);
}
Also don't forget to include the jquery.unobtrusive-ajax.js script to your page if you want your Ajax.* helpers to work:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
I have this simple MVC 3 application which simply has two controllers(Home and Edit), two actions one per controller and two views for each action,
each one of the views has an ajax action link which simply request the other view and displays the result in a div, the problem is that after a certain number of requests the page is getting slower, I checked that with fiddler and noticed that each time I press the action link the request will be send multiple times according to the equation (2 to the power n) where n is how many time the link was pressed, find below the controllers and views.
the Controllers
public class EditController : Controller
{
public ActionResult Index()
{
return View();
}
}
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Text = "Home Page";
return View();
}
}
And the views
Home View
#{
ViewBag.Title = "Home";
}
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
function myCallback(xhr, status) {
alert(status);
}
</script>
<div id="divLoading" style="display: none">
Loading ...</div>
<div id="divResultText">
#Ajax.ActionLink("Edit Ajax", "Index", "Edit", null, new AjaxOptions
{
HttpMethod = "Get",
OnComplete = "myCallback",
UpdateTargetId = "divResultText",
LoadingElementId = "divLoading"
})
</div>
Edit View
#{
ViewBag.Title = "Edit";
}
#Ajax.ActionLink("Home", "Index", "Home", null, new AjaxOptions
{
HttpMethod = "Get",
UpdateTargetId = "divResultText",
LoadingElementId = "divLoading"
})
I have got the answer in
Ajax.ActionLink in MVC3 is getting slow after a number of requests