I am trying to update page with server time using ajax.actionlink; i was able to do this in regular js. Now ajax takes me to new page and its url is home/serverTime ;serverTime is my homecontroller action. Surprisingly the code works even without referencing MicrosoftAjax/ MicrosoftMvcAjax. I am using VS 2013 mvc 4.5
#{
ViewBag.Title = "Home Page";
}
<h2>Ajax</h2>
<div class="jumbotron" id="display">
#Ajax.ActionLink("click here get time", "ServerTime",
new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "display"
})
</div>
Related
I have an issue with a partialview, for some reason when I do a Post on it; it gives me another copy of my form; how can I make that behavior go away . This is what that partialview looks like:
// this is all inside my partialview
<div style=" float:left;">
#using (Ajax.BeginForm("posting", "post", null, new AjaxOptions
{
UpdateTargetId = "glober",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
}))
{
// taken out
}
</div>
<div id="glober">
#foreach (var item in Model.Mymodel)
{
}
</div>
as you can see this is a POST and I only want to update the part with the id of "glober" which it does but for some reason when I do the post it also gives me a second copy of the form elements. If inside my ajax form I have 1 textbox called firstname then after submitting it I get 2 textboxes that says firstname, any help would be great.
Part of my controller is this were i call out the partial
var iefeeds = sqlConnection.Query<thread>("Select * from postings").ToList();
return PartialView("_mypartial");
I think you have returned View rather than PartialView in the controller. So you'll see 2 pages overlapping in response of ajax Post.
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.
After Using the Ajax.ActionLink As
#Ajax.ActionLink("Edit", "AddEdit", new { #id = id, #recId = item.EncyclopediaID }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "listForm" }, new { #class = "edit_icon", #title = "edit this item" })
And When Controller Go to AddEdit Page There i have Uploaded the File and want to show the Ckeditor.
So i use
#using (Html.BeginForm("AddEdit", "Encyclopedia", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
/////////other code//////////////////
#Html.EditorFor(model => model.Description,"CKEditor")
}
Now if i use to show the #Html.ActionLink instead of #Ajax.Actionlink Ckeditor Shows perfectly and in Ajax call it showed like a textarea.
Please Help.
this happens because resource files required for ckeditor to work correctly (eg: css , javascript) cannot be downloaded with an ajax call.
try referencing the required resource files in layout view page and try again.
Edit :
maybe you have placed integration code in document.ready function, thus after ajax request completed and you markup changed, the new markup (eg:your new input element) is not configured as ckeditor input.so try calling ckeditor integration code after ajax success.
in a webapp I'm using an ASP MVC Ajax form in a modal window. I do not use any specific jQuery code, only some to open the modal window (i.e. showModal() function):
#Ajax.ActionLink("Open", "Add", "Home", new {id = Model.Id}, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "modal", OnSuccess = "showModal()"})
This code loads my form (partial view) into a div and opens it as a modal window. In the form submit ActionResult I just use the default ModelState object to validate it, and in case of an error I return the same partial view containing model errors. This works fine except for the following situation: when the model contains no errors I want to auto-close the modal window. I tried the following:
#using (Ajax.BeginForm("Save", "Home", new AjaxOptions {HttpMethod = "POST", UpdateTargetId = "modal", OnSuccess = "hideModal(); alert('Saved');"}))
However, when the model contains errors the Ajax call is still valid, so OnSuccess will be called. I tried to solve this by sending an error HttpStatusCode in the partial view, but then the div is not updated with the new html.
I think the only solution is sending a partial view containing javascript code that closes the modal window when the model contains no errors, but this solution is not very neat in my opinion. Any other ideas?
I just had to do the same thing today. The solution I came up with was to return a JsonResult with a property set to true when the action succeeded. In the OnSuccess callback of the AjaxOptions I checked for the property and closed my modal window.
Controller Method
[HttpPost]
public ActionResult Hold(JobStatusNoteViewModel model)
{
if (ModelState.IsValid)
{
//do work
return Json(new {success = true});
}
return PartialView("JobStatusNote", model);
}
PartialView
<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "JobStatusForm", OnSuccess = "closePopUp" })) { %>
<div id="JobStatusForm">
<!-- Form -->
</div>
<% } %>
<script>
function closePopUp(data) {
if (data.success) {
//close popup
}
}
</script>
I would like to show an AJAX loading icon during an ActionResult request that can take a few seconds to process.
What is the best approach to accomplished this?
I only want to display the icon after the built it validation passes (I am using MVC3, EF Code First, so the validation is automatically put on the page).
There may be further validation/exceptions during the ActionResult, in which case a message is displayed to the user, and I'd then want the loading icon to disappear again.
Define your link as an Ajax action link and specify the ID of a spinning GIF somewhere on your page.
<div id="result"></div>
<img id="spinner" src="../content/ajaxspinner.gif" style="display: none;">
#Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)
or if it is a form:
#using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
#Html.TextBox("Data")<br/>
<input type="submit" value="Submit" />
}
Put the image in a div tag like this:
<div id="busydiv" style="display:none;"><img src="busything.gif" /></div>
and then create your link like this:
#Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null)
or in a form do this:
#using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }))
Obviously omitting those AjaxOptions that you don't need, as per the documentation here: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx
Just my two cents:
The solution posted by Chris is valid and will work BUT you must add a reference to the two javascript libraries below. Please note that the order matters:
<script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
When you create an MVC application pre-loaded with bundling and all these nu-get packages this will probably not be a problem for you but if you were like me and created an empty ASP.NET MVC application you might run into issues.