I am using jQuery's UI dialog to open a basic form. I want to submit that form and close the dialog. I am having trouble.
The parent window opens the dialog (which contains a partial view) from click and form is submitted, they the browser opens the partial view in the browser. I want it to do the form work and close the dialog.
Is there a way to do this VIA Ajax.SubmitForm or some other method.
You need to capture the onsubmit event of the form, send the form via Ajax, close the dialog and then Return False to prevent the browser from submitting the form again and doing a full page postback.
I found an ideal solution and can't believe that I couldn't solve it earlier. Simply use Ajax.BeginForm using the OnSuccess function of the AjaxOptions.
<% using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { OnSuccess = "CloseDialog" })) { %>
<%= Html.Hidden("ID", ViewData["ID"]) %>
<input type="submit" value="Submit" />
<% } %>
function CloseDialog() {
$("#ImageCropModal").dialog("close");
}
This posts to the form without re-rendering the view. The I can close the dialog manually, after form post is successful.
Related
I need to open another site in new tab from code behind in Asp.net MVC.
return Redirect("Url"); is used to open the another site within the same tab.
It doesn't really seem practical for the users, because after authenticating in the second tab, they have to refresh the first tab to see the effects.
The ReturnUrl property of FormsAuthentication seems to do what you want. When the user needs to log in, they are redirected to the login page, and after signing in they are redirected back.
If you are making extensive use of javascript and ajax, and want to keep the javascript variables of the current page but need to log in to do the ajax calls, there might be another solution. If the response of your ajax call is the unauthenticated header, open a lightbox or something like that with a username and password field. Use ajax post to the AccountController to sign in the user again. This way, the user is authenticated again, but you keep the javascript variables.
This can be done using javascript only. Try this.
<%
Response.Write '<script type="text/javascript">
window.open(url);
</script>'
%>
Hope it works.
if you call action from form and use input type of submit you can try
<input type="submit" formtarget="_blank" />
if you use link <a> or AjaxCall you can try
<a target="_blank"></a> or in ajax helper set property #target="_blank"
here is my code
cshtml
#using (Html.BeginForm("PersonsReport", "Reports"))
{
<br />
<div style="text-align: center;">
<input type="submit" formtarget="_blank" class="btn btn-primary" value="GetReport" style="width:100%;" />
</div>
<br />
}
controller.cs
public ActionResult PersonsReport()
{
return Redirect("/PersonsReport.aspx");
}
Can I have a submit in <% using (Ajax.BeginForm("ChangePassword", new AjaxOptions { OnComplete = "ChangePasswordComplete" })) without having a submit button on the form?
I yes, how? Let's say I want to submit the above when a user click on an input of type button simply?
You'd have to use Javascript to post back the form, jQuery has a submit method you can use.
$("#FormId").submit();
But really, an input of type button is the same as submit, only it submits automatically so you might as well use that.
Progressive Enhancement
Alternatively, you can use the jQuery Form plug-in to post a standard form (using Html.BeginForm or manually outputting the <form />) and that will work for people who don't have Javascript enabled on their browser.
I have a shoppingcart control that lists the items in cart. Each row has a delete submit button that is wrapped around ajax.beginform that will call the controller, delete the item in cart and render the shoppingcart as partialview. The ajax and deletion works fine in IE and Firefox. In firefox only, after the submit button is clicked and ajax call is made, submit button is no longer visible. In IE it is visible. Following is the html. Why is is behaving wierd in firefox?
<form action="/Order/DeleteShoppingCartItem?ProductID=2"
method="post"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'divTopRight' });">
<td style="vertical-align:middle">
<button type="submit" id="add-item-button" style="font-size:8px">X</button>
</td>
</form>
Are you wrapping your Ajax.BeginForm in a using statement? Are you sure you have your braces set properly? Sounds like you might be losing a form tag because of this. If so, can you post your view code instead?
Using Ajax.Actionlink instead of wrapping a submit button around Ajax.BeginForm solved the issue.
I have a menu control on Index page rendered as <% Html.RenderPartial("MenuUserControl"); %> where MenuUserControl is something like
<li><%= Html.ActionLink("Link1","Index") %></li>
<li><%= Html.ActionLink("Link2", "Index")%></li>
<li><%= Html.ActionLink("Link3", "Index")%></li>
Now I wan to load three different form in Index page itself onclick of these links, with first form being loaded on Page load. How can I do this. Any help is appreciated.
If you need to pass information about links to RenderPartial
<% Html.RenderPartial("MenuUserControl", new[]{"link", "link"}); %>
however it's better to pass a custom model (class object) rather than array of strings.
Use Ajax.ActionLink to load form without page reload.
To load first form either do this in the Index page itself (add HTML tags or call RenderPartial to render form, or use RenderAction), or add script to the menu partial like this
<script type="text/javascript">
$(function(){ $("a").eq(0).click(); }
</script>
This requires jQuery, though.
If you don't know what I'm talking about then you better prepare to learn a lot.
You will need some sort of JavaScript library like jQuery to do this, the rest is imagination:
-You can pre-load the 3 forms on pageload and then hide the last two on DOM ready (PageLoad). i ll wrap this in div just for convenience.
<script type="text/javascript">
$(document).ready(function () { //This is like DOM ready
//here we hide the the last 2 forms
$('#div_id_form2').hide();
$('#div_id_form3').hide();
//Next set the events for the links (on click show form)
//on link 2 click
$('#link2').click(function(){
//show the second form
$('#div_id_form2').show();
});
//on link 3 click
$('#link3').click(function(){
//show the third form
$('#div_id_form3').show();
});
});
</script>
The other option is go the Ajax way but requires more code and knowledge in jQuery.
If you are interested refer to http://docs.jquery.com/ thats the API reference for jQuery.
If you are moving to MVC, I recomend you to learn any JavaScript library to help you with this kind of behaviors that some call DHMTL (Dynamic HTML).
First do the Non Ajax Version.
Have 1 page Index with 3 partials in it. Each partial has only the html for the form to display in it.
In your actions set the ViewModel (here Action Link1)
model.IsForm1Visible = true;
In your View use the model to display partials
<div id="linkContainer">
<% if(Model.IsForm1Visible){%>
<%= Html.RenderPartial("Form1")%>
<%}%>
<% if(Model.IsForm2Visible){%>
<%= Html.RenderPartial("Form2")%>
<%}%>
<% if(Model.IsForm3Visible){%>
<%= Html.RenderPartial("Form3")%>
<%}%>
</div>
If you need Ajax you can continue from there.
I am using Ajax.BeginForm in ASP.NET MVC to post a form. I have one div being updated using AjaxOption's UpdateTargetId property. Now I need the post to update 2 Divs. I also need to return 2 different views.
Here is the code that I have presently:
<%using(Ajax.BeginForm("Create", new { controller = "View"},new AjaxOptions { UpdateTargetId = "view_tabs" })){ %>
<%= Html.TextBox("viewName") %>
<input type="submit" value="Create a New View" /><br />
<%} %>
Or maybe, the form's submit action should post to one controller returning a view and also make a get request to another controller that returns another view?!!
How do I achieve this using the MVC framework? I don't want to use JQuery or other Javascript libs.
I don't want to use JQuery or other Javascript libs.
Do you have an issue qith jQuery? Because it really is an amazingly great framework. To the best of my knowledge the ASP.NET MVC AJAX is quite limited in it's capabilities, but you can possibly directly use the ASP.NET AJAX libraries?
I do suggest giving jQuery a chance though.