I am trying to get an Ajax ActionLink to insert a small amount of content into a div within a view. No matter what I try, instead of inserting the content into the div with the rest of the HTML in the view in tact, it wipes out the entire existing view, and sends only the partial to the browser.
<div> Other Stuff</div>
#Ajax.ActionLink("Click here to see the latest review",
"LatestReview", new AjaxOptions
{
UpdateTargetId = "latestReview",
InsertionMode = InsertionMode.ReplaceWith,
HttpMethod = "GET",
LoadingElementId = "progress"
})
<div id="latestReview"></div>
<div>More Stuff</div>
So we start with this HTML:
<div> Other Stuff</div>
<a data-ajax="true" data-ajax-loading="#progress" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
<div id="latestReview"></div>
<div>More Stuff</div>
And what I want after the link is clicked it this:
<div> Other Stuff</div>
<a data-ajax="true" data-ajax-loading="#progress" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
<div id="latestReview">[Content Of The Latest Review]</div>
<div>More Stuff</div>
But instead, I get this:
<html><head></head><body>
<div class="review">
content of partial view
</div>
</body></html>
I have tried all the options within InsertMode: InsertAfter, InsertBefore, Replace, and ReplaceWith. I'm probably missing something simple. Just not sure what it is.
The problem turned out to be a miss-match between jquery files. I downloaded the latest versions of jquery, jquery-ui, and jquery.unobtrusive, and then it worked.
Related
In my app I'm using MVC with Bootstrap. Ajax Action links are used as navigation.
Example:
<div class="navbar navbar-default">
<div class="navbar-header"></div>
<div class="buttons-container"></div>
<div class="navbar-collapse">
<ul class="nav nav-pills navbar-nav">
<li>#Ajax.ActionLink( i, "Action", "AboutUs", new { title = i }, new AjaxOptions() { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv", OnComplete = "updateDivAboutUs"} )</li>
</ul></div> </div>
Everything works as expected, when I resize my browser these links are converted into "dropdown" but my main problem is after converting I lose Ajax options like update target and I have plain text on my page without css and anything.
Did anyone encounter this problem before and any possible solution for this?
That's Bootstraps responsive design. The resizing of your nav links to a dropdown box. removing the 'navbar-collapse' div should do the trick I guess.
I am working with MVC trying to load the results of a form submission into a specific DIV.
Below is the code of my form:
<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions { UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnBegin = "return loadingBar();" }, new { #name = "AirOptionSegment_Air" }))
{ %>
<%
Html.RenderPartial("AirOneWay", Model);
%>
<br/>
<div class="agent-actions">
Load Original Data
<input type="submit" class="btn green" id="a1" name="SearchAir" value="Search" />
</div>
<% } %>
</div>
I have included the necessary js files in my site master:
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>
But somehow, the Partial view that is rendered by the AirOption/ShopByAirCriteria action method is not being loaded in the DynamicAirOptions div but in a new page.
Any idea on what the issue might be?
It was working properly when I was using the html.BeginForm helper, but I changed it to use the ajax helper instead because I need to load the results into a specific div. Is there any way to specify the TargetID with the html helper?
I would caution against using Ajax.BeginForm. It's a bit of a hold-over from Web Forms, and in my humble opinion, should never be used under any circumstances. It hides logic and therefore leads the developer pretty inevitably into a situation like yours, where it's not working and there's no obvious reason why. Explicit is always better than implicit; when you control the AJAX call, you'll always know why it does or does not work.
So, just use a regular Html.BeginForm and then tie into the submit event with some custom JavaScript. Make your AJAX call to submit the form in your event handler and then render the resulting response to the page in the div you want. Since you're already using jQuery, this is super simple:
$('#YourForm').on('submit', function (evt) {
evt.preventDefault();
$.post('/some/url', $(this).serialize(), function (response) {
$('#YourDiv').html(response); // assuming response is HTML
});
});
A side benefit to this approach is that you're not crippling the standard form. It's still just a regular old form, so if JavaScript is disabled, or not available at all (such as with many screen readers used for the blind), the form can still submit the standard old way and return a new page with the results.
Have you include jquery before jquery.unobtrusive-ajax.js? it could be also some javascript error, check Console in your browser developer tool.
I've paste your code in blank mvc4 app and works as expected.
Master:
<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>
View:
<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions { UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }, new { #name = "AirOptionSegment_Air" }))
{ %>
<div id="DynamicAirOptions">
</div>
<br/>
<input type="submit" class="btn green" id="a1" name="SearchAir" value="Search" />
<% } %>
</div>
My problem was using the following in my layout. I believe it was loading unnecessary files that were causing a conflict. It all worked fine in Edge and Safari, but the PartialView would not render inside the div on Chrome. It would display in a new page.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
Instead of using the bundles, I went with this and Ajax.BeginForm works great!
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
Context:
I am new to MVC asp.net Framework 4. In my application i wish to update a partial view upon a user click event (using an ActionResult). In index.aspx i use the standard Ajax.BeginForm containg a div in which i render the partial view (which calls the ActionResult):
*<%using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }))
{ %>
Name
<input id="txtName1" name="RoleName" type="text" value="" />
<br />
<br />
<div id="divToUpdate">
<%--render what you want to update here.. --%>
<%Html.RenderPartial("~/Views/Shared/SecurityMainPartialView.ascx", Model); %>
</div>
<br />
<input type="submit" id="btnSubmit" value="Search" />
<% }%>*
The updating of the partial view works. However:
The issue:
In the Site.Master i had the form tag, which i had to remove becuase the partial view would redirect the action link to Index instead of search. in removing this i can no longer use the asp:scriptmanager tag which is needed to use the asp.tab etc etc...
I get the following error: *Control 'ctl00_MainContent_ScriptManager1' of type 'ScriptManager' must be placed inside a form tag with runat=server.* error even on the ActionLinks in the site master.
Site master code:
*<body>
<%-- <form id="form1" runat="server">
--%> <div id="container">
<div id="header">
<h1 style="width: 1207px; margin-left: 0px">PROM (Promise Remote Order Management)</h1>
<div id="menubar">
**<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("Security", "SecurityMain", "Security")%></li>
<li style="width: 1208px; height: 0px"><%= Html.ActionLink("About", "About", "Home")%></li>**
</div>
</div>
<div id="content" style="height: 100%; width: 100%;">
<asp:ContentPlaceHolder ID="MainContent" runat="server" >
<p style="height: 132px; margin-top: 0px">
</p>
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>© footer stuff goes here!</p>
</div>
</div>
<%-- </form>--%>
</body>
</html>*
QUESTION:
How can i incorporate the use of scripts (ScriptManager) in my Asp.net MVC 4 app? Do i use MVC ScriptManager or something else? I know we are not supposed to use script manager in MVC as it breaks the rules...what is my alternative.
Thank you any help would be greatly appricitaed.
you shouldn't use web controls in asp.net mvc application. You can do it but I don't recommend. You can use some javascript libs like jQuery, Ext.Js etc... to do async operations in your View.
I like jQuery it's easy, fast to learn and develop and cross-browser (works in i.e., firefox, chrome, etc...) and I've been using it on my web apps with asp.net mvc and works very fine. Take a look at this link: http://api.jquery.com/jQuery.ajax/ it will show to you some operations with ajax (get/post calls, json result etc...) usign jquery lib.
jQuery comes in default template of asp.net mvc of visual studio, use it :)
Cheers!
Consider:
<div id="tabs" >
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul><br />
<div id="Tab1" style="margin:0px; padding:0px;">
<ul>
<li>Inner A</li>
<li>Inner B</li>
<li>Inner C</li>
</ul>
<div id="InnerTab1">Welcome to Inner Tab1</div>
<div id="InnerTab2"><p>Welcome to Inner Tab1</p></div>
<div id="InnerTab3"><p>Welcome to Inner Tab1</p></div>
</div>
<div id="Tab2"><p>Tab2</p></div>
<div id="Tab3"><p>Tab3</p></div>
</div>
The above code is in a PartialView named ABC.
<%= Ajax.ActionLink("Select", "Action", new { Id = item.CustomerID }, new AjaxOptions { UpdateTargetId = "Abc" })%>
And the above code is in a partial view as well named XYZ.
So I have two partial views, Abc and XYZ. These two partial views are called on one view. On the view XYZ, I have a actionLink button on the click of which I am able to fill in details in ABC.
Now, in ABC I have a Tab panel as shown in the above code. When the page is load for the first time, I get the jQuery tab properly displayed. When I click on the ActionLink button, the tabs are displayed in the form of List.
I don't know what is happeneing. So this is my problem. Why are they losing their CSS on the click of action link?
I have included all the jQuery files in my code.
The jQuery UI Tabs component is not just CSS - it also uses JavaScript code to modify the elements under #tabs. When you click on the link, everything inside ABC is replaced with the version from the server, which does not include those modifications.
If you are using unobtrusive Ajax updates on an element that contains tabs, you will need to add an OnComplete handler to AjaxOptions that calls $("#tabs").tabs() to redo those modifications after the HTML is updated.
I'm currently porting a jQTouch web project to jQuery Mobile and have run into the following issue: I need to display a form submit button in the page header, but unless I make the submit button an action in the header (instead of an input of type submit in the content) jQuery Mobile will always render that button as part of the form.
This will work (button will show on the right side of the page header):
<div data-role="header" data-theme="b">
<%: Resources.View.Account.Labels.DoLogOn %>
</div>
Thing is, I'd have to write custom javascript to trigger the submit, which obviously I'd rather not. If, on the other hand I handle this inside the form, i.e.
<% using (Html.BeginForm("LogOn", "Account",
new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post,
new { #class = "ui-body ui-body-c" }))
{%>
<fieldset class="ui-grid-a" data-theme="c">
<input data-icon="check"
class="ui-btn-right"
type="submit"
value="<%= Resources.View.Account.Labels.DoLogOn %>" />
</fieldset>
<% } %>
the button will be displayed inside the content.
Is there a way to make jQuery Mobile display the submit button in the header using the latter approach?
I know I'm a few months late, but I came across this post researching another problem. To submit a page from a button in the header you can use the following button markup:
<a href="#" onclick="$('form#Account').trigger('submit')" class = "ui-btn-right" data-role="button" >Logon</a>
I am not familiar with jQTouch, but how about something like the following?
The issue is probably around the css classes used and where you have used them.
<% using (Html.BeginForm("LogOn", "Account",
new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post))
{%>
<div data-role="header" data-theme="b">
<fieldset class="ui-grid-a" data-theme="c">
<input data-icon="check"
class="ui-btn-right"
type="submit"
value="<%= Resources.View.Account.Labels.DoLogOn %>" />
</fieldset>
</div>
<div id="Content" class="ui-body ui-body-c">
...content here
</div>
<% } %>