I have a partial view that has an Ajax.BeginForm, it renders after clicking on a link, it was working before but I changed it and now its not working, this is what it looks like now:
#using (Ajax.BeginForm(
"AddTimeSeriesData",
"Employees1Controller",
new routevalues { },
new AjaxOptions { UpdateTargetId = domElementId, InsertionMode = InsertionMode.ReplaceWith },
new { id = "ajax_form" }
)
)
{
is my declaration wrong? Isn't this a valid overload?
when I had the following it worked:
#using (Ajax.BeginForm(
new AjaxOptions { UpdateTargetId = domElementId, InsertionMode = InsertionMode.ReplaceWith }
)
)
{
AddTimeSeriesData should be your Action Method on your controller Employees1Controller.
Make sure your contoller name correct, I guess it should be Employees1 and not Employees1Controller.
Since you are doing nothing on parameter three (new routevalues) remove it.
Hope fully it will work for you.
Related
In my code, when user presses the submit button, it will execute an AJAX request to the controller.
It's all doing fine, however, I also wanted to update the browser URL to include the full query string (e.g. http://localhost/Forecast?BillingToes=123&Year=2016).
The Controller is returning a partial view with a model. Adding an additional property containing the full URL with query string seems to be OK. However, it seems pretty awkward.
So my question is, is there a way to retrieve the full URL via JavaScript after OnComplete? Below is my View:
#using (Ajax.BeginForm("UpdateForecast", null, new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "forecastControlPart",
LoadingElementId = "ajaxSpinnerImage",
OnBegin = "DeactivateForm",
OnSuccess = "initAppendHeader();UpdateURL(xhr)",
OnComplete = "ReloadFiltersBehaviour"
}, new
{
#class = "onChangeForm",
data_currencyurl = #Url.Action("GetCurrencyForBilling", "DataSource"),
}))
I found the solution to my problem, using $(form).serialize() can fetch all the parameters the form submit to the server, so my code would look like:
In my View:
#using (Ajax.BeginForm("UpdateForecast", null, new AjaxOptions {
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
OnSuccess = "initAppendHeader(),UpdateURL(this)",
}))
In my Javascript file:
function UpdateURL(form) {
// Auto-Update browser URL to include parameters after submit.
var formData = $(form).serialize();
window.history.pushState(null, null, formData);
}
I'm trying to use Ajax.BeginRouteForm to create a list of results that can be paged and searched. The general idea is that the menu at the top of view and the layout would not be redrawn, but the central area with the search results would be.
So I have two controller actions, a GET, which returns an initial model and the view, and a POST, which takes the model, gets the page/search info from it, and runs the search, returning the same model and view.
What I'm seeing is that the POST works, the new results are obtained, and the view is being compiled with those new results (debug code tells me this), but clientside the form is not being redrawn.
When I add the InsertionMode and UpdateTargetId params, I get the view-inside-the-view issue, where the whole menu is being rendered inside the form area.
#using (Ajax.BeginRouteForm(ContentRoutes.EmailContentList,
new { instance = UserContext.InstanceId },
new AjaxOptions
{
HttpMethod = "POST",
OnBegin = "blockForm();",
OnComplete = "unblockForm();",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "frmContent"
},
new { id = "frmContent" }))
{
You should have an outside div with ID frmContent containing the form
<div id="frmContent">
#using (Ajax.BeginRouteForm(ContentRoutes.EmailContentList,
new { instance = UserContext.InstanceId },
new AjaxOptions
{
HttpMethod = "POST",
OnBegin = "blockForm();",
OnComplete = "unblockForm();",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "frmContent"
}
}
</div>
This is because you are adding the result of the AJAX call to the frmContent HTML element.
Also, you should make sure that AJAX actually works: Use if (Request.IsAjaxRequest()) inside your Action and inspect it's value with the debugger.
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 these ActionLinks in my Main Index View:
<p>#Ajax.ActionLink("Releases", "Index", "Release", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ContentPanel" })</p>
<p>#Ajax.ActionLink("Templates", "Index", "Template", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ContentPanel" })</p>
<p>#Ajax.ActionLink("Testplans", "Index", "Testplan", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ContentPanel" })</p>
below is this:
<div id="ContentPanel">
#RenderBody()
</div>
When I click each link Release,Templates, Testplans one after the other the switching of the views work.
When I click in this order:
Releases
Templates
Releases
Templates
The switching does not work anymore. The problem seems to be that when I set a breakpoint in my controller index method:
public ActionResult Index()
{
return View();
}
The Index Action is called in a looooooop ??
Why this?
Could you try this code:
Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";