MVC :: Using Tabs With Partial Views And Want To Render The Correct One After A Postback?
Nov 22, 2010
I am using tabs and I want some user input on each one.hen I click submit I return the partial view. However it is only the partial view that gets rendered.What I am trying to do is keep the overall view and render the partial view. In fact what I am trying to do is known as hijaxing, but I am not familiar enough with Ajax that I know how to do it.So this is my view;
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Employee.Master" Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.HolidayRequestViewModel>" %><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> HolidayRequest</asp:Content><asp:Content
ID="Content2" ContentPlaceHolderID="EmployeeContent" runat="server"> <% using (Html.BeginForm()) {%> <%: Html.AntiForgeryToken() %> <h2>Holiday Request</h2> <p>You have <%: Html.DisplayFor(model => model.DaysAvailableThisYear) %> days left annual leave for this year and <%: Html.DisplayFor(model => model.DaysAvailableNextYear) %> days left for next year.</p> <p>If your request is approved and exceeds the number of days left, then those extra days will not be paid.</p> <%: Html.HiddenFor(x => x.EmployeeId) %><%: Html.HiddenFor(x => x.ApproverId) %> <% } %> <div id="tabs"> <ul> <li><a href="#tabs-1">Approver</a></li> <li><a href="#tabs-2">Single Date</a></li> <li><a href="#tabs-3">Date Range</a></li> </ul> <div id="tabs-1"> <% Html.RenderPartial("GetApproverTab", Model); %> </div> <div id="tabs-2"> <% Html.RenderPartial("GetSingleDateTab", Model); %> </div> <div id="tabs-3"> <% Html.RenderPartial("GetDateRangeTab", Model); %> </div> </div></asp:Content>
This is my partial view;
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.WebUI.Models.HolidayRequestViewModel>" %><% using (Html.BeginForm("GetSingleDateTab", "Employee", FormMethod.Post, new { id = "frmSingleDate" })) { %><p>Enter your day or part day of Annual Leave here.</p><table> <tr> <td align="right">Date:</td> <td><%: Html.EditorFor(x => x.SingleDate) %></td> </tr> <tr> <td align="right">Morning Only:</td> <td><%: Html.CheckBoxFor(x => x.MorningOnlyFlag) %></td> </tr> <tr> <td align="right">Afternoon Only:</td> <td><%: Html.CheckBoxFor(x => x.MorningOnlyFlag) %></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Save" /></td> </tr></table><%: Html.HiddenFor(x => x.EmployeeId) %><%: Html.HiddenFor(x => x.ApproverId) %> <% } %>
and this is my controller;
View 7 Replies
Similar Messages:
Feb 3, 2011
Scenario: Loading partial views into jquery tabs(Ajax Mode) using MVC3 &Razor . Works fine in FF but not in IE8 or IE7. I can trace the ajax request & responses in firebug fine and see partial views returned from the server (containing JqGrid Html Helper methods).This loads up fine within the tab conatiners in firefox.But in IE nothing happens and i cant see any ajax requests getting fired from changing tabs when i use Fiddler.Ive tried playing around with the ajaxOptions when i initialize jq Tabs to no avail.
Ive had this problem on MVC2 and i resorted to laying the tabs contents out statically ,which i dont want this time, as i need lazy loading. Below is a full page source dump from IE8, renedered using the razor view engine. (Links to all Csss and JS libs)
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<h2>Index</h2>
<div id="tabs">
<ul>
<li><a href="/"><span>Home</span></a> </li>
<li><a href="/ServicesMonitored/GetServicesMonitoredTab"><span>Monitored Services</span></a> </li>
<li><a href="/ServicesMonitored/GetServicesFullTab"><span>Full Services</span></a></li>
</ul>
</div>
</body>
</html>
From Controller:
public class ServicesMonitoredController : Controller
{
IServicesMonitoredRepository<ServiceHeaderInfo,InfoDataItem> Services;
public ServicesMonitoredController() {
Services = new ServicesMonitoredRepository();
}
public ActionResult GetServicesMonitoredTab()
{
return PartialView("ServicesMonitoredTab");
}
public ActionResult GetServicesFullTab()
{
return PartialView("ServicesFullTab");
}
#region Return Services
[HttpPost]
public JsonResult ReturnServices(string sidx, string sord, int page, int rows)
{
}
View 1 Replies
Mar 9, 2010
I have an MVC view that contains a number of partial views. These partial views are populated using partial requests so the controller for the view itself doesn't pass any data to them. Is it possible to reload the data in one of those partial views if an action was triggered in another? For example, one partial view has a jqGrid and I want to refresh the data in another partial view when a user selects a new row in this grid. Is there a code example for this scenario (in C#) that I can look at to see what am I doing wrong? I am using ajax calls to trigger a new request but non of the partial views are refreshed so I am not sure if the issue is with the routing, the controller,
View 1 Replies
Jun 23, 2010
I have some textboxes (in an UpdatePanel in a ModalPopup in a User Control) that look like this:
<asp:TextBox ID="exampleTextBox" runat="server" MaxLength="10"
CssClass="datepicker" ReadOnly=true
Text='<%# Bind("ExampleDateField") %>' Width="77px">
</asp:TextBox>
I also have some jQuery (imported from file on the Master page) that hooks up the jQuery DatePickers like so:
function pageLoad() {
$(".datepicker").unbind();
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
beforeShowDay: $.datepicker.noWeekends,
showOn: 'button',
buttonImage: '../Resources/Images/Calendar_scheduleHS.gif',
buttonImageOnly: true,
buttonText: 'Select a Date'
});
}
The DatePickers appear correctly, even after a postback. The problem is that the value of the textboxes is not changed when a postback occurs. This is very odd since the textbox shows the selected date in the browser. However, the value of the textbox is still the date that the textbox originally had, not the date selected from the datepicker.
View 1 Replies
Jun 16, 2015
My bootstrap tab is inside update panel now on postback it loses its active tab state . I referred this article :
[URL]
But it didn't worked for me. How to maintain bootstrap tab active on postback inside update panel.
View 1 Replies
Jun 16, 2010
i want to implement partial views in asp.net
View 1 Replies
Jun 17, 2010
I have done partial views in ASP.NET MVC but now I want to convert it to ASP.NET. I have used AJAX and JavaScript. How can I convert the following:
<a href="#" onclick="LoadPartialView('#MainContentDiv', '<%=Url.Action("AdminHome", "Admin")%>')">Home</a> ,
<input type="button" value="Submit" onclick="LoadPartialViewPost('#MainContentDiv', '<%=Url.Action("ViewPage", "Controller")%>', $('form').serialize())" />
to ASP.NET, or in other words, how can I load a partial view in ASP.NET?
View 1 Replies
Mar 20, 2010
I have an MVC 1.0 project and I have created an IView extension so I'm able to render also xslt in addition to normal view form.
the content of each page must be dynamically changes (more or less a CMS), so I write some slots of content (xslt views) and I want to render one or more of this slots into a single page.
It easy to render just one, withe the viewextension or via partial render .. I dont know how to render more than 1. In classic asp the first option should be a virtual include. How can i do that? or smoething similar?
View 3 Replies
Mar 8, 2011
I am implementing jquery tabs with partial views in my project.I just tried the implemention mention in this link [URL]My tabs are working very fine.. my question is how can i send the model in that viewto partial view..i think we can do it by this syntax @Html.RenderPartial("Name",ObjectModel);In the above link Kevin created the tabs with only anchor tags... it will pick the partial view and how can i send the model to that partial view....
View 3 Replies
Jul 14, 2010
i m working in asp.net and i want to implement partial views. i want to load .ascx page without refreshing the current page and not even url changed. can i implement it in asp.net.
View 1 Replies
Jul 23, 2010
In one of my mvc application's view I have an AJAX form:
<% using (Ajax.BeginForm("HandleAddForm", "Home", new AjaxOptions { UpdateTargetId = "ContentDiv", InsertionMode = InsertionMode.Replace, OnBegin = "beginFormLoadEffect", OnSuccess = "successFormLoadEffect" }, new { id = "AddForm" }))
{ %>
...
<% } %>
When user lefts the computer after five minutes he is beign automatiacally logged out . And when I submit form by clicking submit button the ContentDiv is beign filled with full site with login panel. I.e. I want to show the full site with login panel NOT in the ContentDiv. Is there any way to avoid this behaviour?
View 6 Replies
Nov 17, 2010
I have following architecture. My Model:
[Code]....
The partial view "PersonsView" has the same model and looks like this:<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<Web.Models.WebModel>" %><%Html.RenderPartial("Person", Model.Persons.First); %><%Html.RenderPartial("Person", Model.Persons.Second); %>
And the the partial view "Person" has an other model:[Code].... If I press the "Submit-Button" on the first view I get to the follwing controler: [Code]....
View 2 Replies
Feb 22, 2011
I have 2 partial views and models for them. I want to show both views on page and i assume i need one model to pass to the page. Do i have to create all the properties again for both partial views into one model?
view model 1
[Code]....
view model 2
[Code]....
View 4 Replies
Jun 1, 2010
Maybe this question is quite simple because I'm new to MVC2. I have a simple demo MVC project.
(1) A weak-typed view: Index.aspx
<% Html.RenderPartial("ArticalList", ViewData["AllArticals"] as List<Artical>); %>
(2) A strong-typed partial view: ArticalList.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<Artical>>" %>
<% foreach (Artical a in Model) { %>
<%= Html.ActionLink(a.Title, "About", new { id = a.ID })%><br />
<%} %>
(3) Here is the HomeController.cs
public ActionResult Index()
{
ViewData["AllArticals"] = Artical.GetArticals();
return View();
}
public ActionResult ArticalList()
{
return PartialView(Artical.GetArticals());
}
Sorry I'm using a Web-Form "angle", because if I'm using a Web-Form, when I visit Index.aspx, rendering ArticalList.ascx will call public ActionResult ArticalList(). But here I need to write Artical.GetArticals() twice in two actions. How can I put them in one?
View 1 Replies
Jul 9, 2010
I have an application that has an public 'end user' mode and a 'back office' mode. Both 'modes' pretty much share the same controller logic but the user interfaces for these different 'modes' are radically different. Using the out of box default routing that you get when a project is created for the first time I have something like the following:
Controllers
HomeController.cs
Views
BackOffice
Index.aspx
Public
Index.aspx
Shared
BackOfficeSite.Master
PublicSite.Master
In my HomeController.cs I have logic that looks like this:
public ActionResult Index()
{
var devices = DeviceRepository.FindDevicesByCustomer(100);
if(IsBackOffice())
{
return View(@"~/Views/BackOffice/Index.aspx", devices);
}
return View(@"~/Views/Public/Index.aspx", devices);
}
Is this the correct way to be doing this or am I digging myself an anti-pattern hole? I'm using ASP.NET MVC 2.
View 3 Replies
Mar 16, 2011
I want to load the partial views when I click on the hyperlink, in my case I am loading both the partial views and then I am showing or hiding depending the parital views.
<script
type="text/javascript">
$(document).ready( [code].....
View 1 Replies
Jan 31, 2011
I am wondering if Java Spring MVC has some sort of implementation that relates to returning partial views like ASP.NET MVC? Basically I want to return HTML, that is bound to an object and return it to a javascript callback to append to the dom, stead of building the html with Jquery (which is tedious). If not I may go with Jquery templates.
View 1 Replies
Feb 22, 2011
I want a view that contains 2 partialviews. 1 partial view should be a create or edit view (of items) and in the second partial view there should be a list with the items that are created (and which can be edited). When an item in the list is selected for editing the 1st partial view should show the edit view with the item to be edited.
After saving the data, the create view should be shown in the 1st partial view again. When the view comes up for the first time the 1st partialview should contain the create view. In normal ASP.net I would do this with a formview (with insert and edit mode based on the itemselected in the gridview) and a gridview (and of course everything in an AJAX update panel).
View 2 Replies
Feb 21, 2010
I've got a section of code that is common to a whole load of pages, so it makes sense to put it in a partial view. However, part of it's function is declaring and assigning a set of variable that will be used throughout the main page. However, if I move that code off to a partial view and use renderpartial to include it, I get a compiler error saying the variable isn't defined - "The name '<variable name>' does not exist in the current context". Am I missing something basic/silly?
View 9 Replies
Nov 5, 2010
I have an "Instruction" view, which have partial views for entering instruction details, different attributes for the instruction, different input values etc for the instruction. Each of which is seperate partial view. The main view have a save button which save all these details. "InstructionDetails" partial view have instruction name, description and its model is "Instruction". "Attribute" partial view have dropdown to select attribute and a textbox to enter its value. It also has an button "Add to list" which is intended to add attribute details to a table which is in the same partial view for attribute, its model is "Attribute". Same is the senario with input values. I have few problems where i am struck up with.When the "Add to list" is clicked in Attribute partial view, the values from the dropdown and textbx need to be listed to the table.When "Save" button is clicked the entire view need to be saved.
View 2 Replies
Jan 20, 2011
Using the Razor engine how do I create Partial Views. Do I create a normal View and calling the PartialView() in the controller will only output the body content and when calling View() in the controller will output the full page with layout. If not, do I need to create specific Partial Views and then use RenderPartial in the View.
View 6 Replies
Feb 3, 2010
I am trying to get JQuery events to work with partial views in ASP.NET MVC. However, after you load a partial view through Ajax, JQuery seems not able to fire events for any of the elements in the partial view. I suspect that this issue will also happen if you are using other frameworks or JavaScript libraries to load partial html code with Ajax.
For instance, consider the following example:
Controller:
[Code]....
Once the page loads for the first time, you can click on the "Click here to display a Javascript message" and you will get a Javascript alert message that says "button clicked". However, once you click on the "Click here to load partial view", clicking on the button that is supposed to bring the Javascript alert message doesn't have any effect. It seems that the 'click' event is not being fired anymore.
why this issue occurs with JQuery and how to fix? This issue also occurs with other JQuery plugins that use events.
View 2 Replies
Apr 24, 2010
What is the best place for javascript that is specific to a partial view? For example, if I have a partial view (loaded via ajax call) with some divs and I want to turn those divs into an accordian, would it be better put the $("#section").accordion() in script tags inside of the partial view, or in a .js file in the function that retrieves that partial view and inserts it into the DOM?
Obviously, common methods I will be keeping in a .js file, however I am more talking about javascript very specific to the partial view itself. Most things I find on the net seem to say to put all javascript into a separate .js but nothing addresses the idea of partial views.
View 1 Replies
Jan 10, 2010
how to show dynamic partial views by dropdown selected value in MVC?
View 6 Replies
Nov 15, 2010
I am new to ASP.NET MVC, how to load partial page data again when calling different views?. I have divided my site.master page into two divs: Left Menu, and Right. When the first page load. Home/Index, it get the GetSourceList() from the Home Contoller and display the item as menu on left. The issue i'm having when I click on the item on the left, it display the data on the right but doesn't show the menu. I have a site.master reference in my list page.
[Code]....
View 1 Replies