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!
Related
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.
I'm using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.
I am working on a website, using ASP.NET MVC3 with .aspx pages. The web site supports desktop browsers and mobile phones with the same site. The site has a single master page. I want to avoid redirecting to a mobile site, because that would duplicate a lot of html. I still intend to use the user-agent to determine when a mobile device is hitting the site, but instead of redirecting the browser, I set a flag that I use in the master page to control what HTML is generated.
I have run into trouble determining the best way to get the master page to generate the HTML I want. I have two strategies in mind to solve this problem, but I don’t know if this is the best way.
The first strategy is, to use the mobile flag to add, replace, or remove HTML content that is mobile specific.
Pro: Minimize duplication of HTML
Con: Multiple if statements.
Requires a second mobile specific .css to be downloaded. (Because the html has multiple if statements, we really need 2 css files, one for mobile and one for none mobile. We can't easily use specificity rules to deal with this in one css file).
Here is an excerpt from the master page using this strategy:
<% if (isMobile)
{
Html.RenderPartial("MobileSearchControls");
}
else
{ %>
<div id="viewTabs" class="span3">
...
</div>
<% }
%>
<%--body --%>
<div id="bd" class="row-fluid">
<% if (!isMobile)
{ %>
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<% }
%>
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% if (!isMobile)
{ %>
<div class="span2" id='right-column'>
</div>
<% }
%>
The second strategy is divide most of the body in master page into two parts, one for mobile, and one for desktop.
Pro: Avoids downloading an additional .css file. (Because the mobile code can be in a div with id of mobile and use specificity rules in the css).
Con: Greater duplication of code.
The tags must have unique ids, even though they are in mutually exclusive code blocks.
css is more complex for mobile page, because all tags are underneath a mobile tag.
A similar excerpt for the master page using this strategy:
<% if (isMobile)
{
%>
<div id="mobile-search-controls">
<asp:ContentPlaceHolder ID="MobileSearchContent" runat="server" />
</div>
<%--body --%>
<div id="bd" class="row-fluid">
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MobileMainContent" runat="server" />
</div>
</div>
</div>
<%--body end--%>
</div>
<%
}
else
{ %>
<div id="bd" class="row-fluid">
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="span2" id='right-column'>
</div>
</div>
<%--body end--%>
<% }
%>
Which way should I go? Is there a third better way?
You might want to consider using a framework such as Twitter Bootstrap (http://twitter.github.com/bootstrap/).
They have some examples that work well on devices of any resolution:
http://twitter.github.com/bootstrap/examples/fluid.html
you should be using css 3 media queries for things like this.. have a look at this link it has a demo
http://webdesignerwall.com/demo/adaptive-design/final.html
user277498,
I've used the Mobile Ready HTML5 MVC.NET template for vs:
http://visualstudiogallery.msdn.microsoft.com/9df9c61c-4d90-43e5-9aa1-a58786b7a1e4
to great effect. this basically has a viewengine that allows views to be directed twds mobile and/or normal mvc. it's actually quite 'magic' the way it works. give it a try, I've used in 3 projects now with no hiccups.
I'm working on Asp.net MVC Application. When I use a form and try to submit , it just reloads the page. I have included the method and Action info , but the form and data are not sent to address specified in action attribute of form. Any help please
<form action="/Search/SearchforQuery/" method="post" runat="server">
<p>Search : <input style="font-size:medium; width: 600px; height: 29px;"
name="searchField" id="searchField" /></p>
</div> <input type="submit" value="Submit Form" />
</form>
Why are you using runat="server" if you are using MVC?
Delete it.
Try to use:
#{ using (Html.BeginForm(...))
{
<p>
Content here
</p>
}
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>
<% } %>