I have a view that contains a partial view that is brought into a #section on the layout page.
How can I include the fields in that partial view in a section in the form collection on submission?
If I put it into the using(Html.BeginForm()){#section } the section does not get placed in the proper place on the form. If I don't include it in the using section the fields don't get submitted as part of the form collection.
Any way to make this work?
#using(Html.Beginform("MyMethod","home", FormMethod.Post)){
#Html.Partial(MyModel)
<input type="submit" value="continue"/>
}
#section LowerLeftBlock{
#HtmlPartial("partials/_additionalformfields")
}
And the layout page:
<div id="body">
#RenderSection("LeftBlock",false)
#RenderBody()
</div>
You could easily use jQuery to copy the additional fields into the form, either when the page is fully loaded or just before the form is submitted. Something like this might do:
<script type="text/javascript">
$(document).ready(function(){
$('#theform').submit(function(){
$("#lowerleftblock input").appendTo("#destinationform");
});
});
</script>
You would obviously need to adjust the css selectors in the sample code above for this to work.
You may want to
See the jQuery docs for more info on appendTo.
See the jQuery docs for more info on selectors.
Related
I am migrating a WebForm asp.net project to MVC. I copied and pasted the masterpage content to the _Layout.cshtml page. Now I got the side panel for the site Navigation. In the Webform, as shown in the code below, the put the site navigation to the far left. I tried both the enf and ~/Views/SiteNavigation.ascx, but the site navigation control is not appearing when I load up the page. Just a blank left panel. Any help is appreciated.
<div class="horizontalTabBarContent" id="mainTabContent">
<enf:SiteNavigation ID="ISRNavigation" />
#*~/Views/SiteNavigation.ascx*#
<div id="main">
<asp:ContentPlaceHolder ID="ISRContent" >
</asp:ContentPlaceHolder>
</div>
</div>
</asp:Panel>
I gess you're looking for Html.RenderPartial helper.
In Razor syntax it will be:
#{ Html.RenderPartial("~/Views/SiteNavigation.ascx"); }
First of all,
A view in MVC is basic HTML code in which you can add razor syntax. The "Razor code" will be parsed server side and will generate html output to bind models, generate valid url etc.
Here is an example of what your _Layout.cshtml view might look like:
<div class="horizontalTabBarContent" id="mainTabContent">
<div ID="ISRNavigation" />
#Html.Partial("~/Views/YourPartialNavigationView") //Your navigation bar will be rendered here
<div id="main">
#RenderBody() //Body html code will be rendered here
</div>
</div>
MVC Projet don't support the asp:htmltags syntax
in MVC instead of web forms user control, you should use partial views and by using of Helper functions like RenderPartial and Partial you could render it througth your view !!
and also instead of using PlaceHolder you should use Section !
you can Google for both topics : partialView , Section
Can I put javascript in a child control and expect it to execute on document load?
My child control renders HTML correctly however the javascript is not rendered to the page and of course does not execute. Is it possible to do what I am asking and if so what am I doing wrong?
In my parent .cshtml page I have:
#Html.Action("LoadToolsControl", "ToolsControl", new { area="Common" })
ToolsControl.cshtml looks like this:
<div style="overflow:auto;height:190px;">
<ul id="ToolsControlToolsList"></ul>
</div>
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
alert('hi there');
});
</script>
}
The bottom few lines of my LayoutPage look like this:
#RenderSection("scripts", required: false)
</body>
</html>
Your layout page doesn't really "interact" this way with the child action. Think of it like an independent subpage that is inserted into the parent. Specifying the #section scripts in the child won't work with #RenderSection in the parent.
Try to use Partial instead of child action or tell us a little bit more about why you are doing it like this.
I minimized the problem to this simple reproduction. Create new Asp.net MVC app, add Angular.js via nugget.
_Layout.cshtml:
<head>
<!-- Other stuff -->
#RenderSection("JavascriptInHead", required: false)
</head>
_Index.cshtml
#section JavascriptInHead {
<script src="~/Scripts/angular.min.js"></script>
}
<div ng-app>
{{2 + 2}}
</div>
So this works (obviously), however when I click, say About or Contact menu to reload another view and then go back to Home, I get
{{2 + 2}}
Then I click page reload two times and I get
4
Please help me understand this..
Angular bootstraps when the document loads. So if you are loading html that contains angular into your page without doing a full page refresh, you'll need to bootstrap angular manually. Try adding this script to your partial page:
angular.element(document).ready(function() {
angular.bootstrap(document);
});
btw, I for one appreciate you posting a concise example rather than 100 lines of code from your actual project. If your actual project has an app name, however, like this...
<div ng-app="myApp">
then the js you put into your partial page should look like this...
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
Documentation for manually bootstrapping Angular can be found here: https://docs.angularjs.org/guide/bootstrap
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this
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.