Databases
StackOverflow2013
Postsdbo
POHow do you build a Single Page Interface in ASP.NET MVC?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you build a Single Page Interface in ASP.NET MVC?
    primarykey
    data
    text
    <p>I want to build a webapplication with a "Single Page Interface", using ASP.NET MVC.</p> <p>I have searched if this was at least possible and I think the answer is: not by simple means (reading <a href="http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2</a> second-last paragraph; that article is from May 2008, though).</p> <p>I found other examples which implemented this by coding/hacking with jQuery. However, I'm looking for a clean solution, using standard .NET approaches, if possible.</p> <p>What I want is precisely the same functionality when you create a new "MVC Web Application". However, instead of links to "/Home/About" which reloads the entire page, I want links to "<b>#</b>Home/About" which loads only the new part via AJAX.</p> <p>The standard approach of calling templates (partial views) with Html.RenderPartial is exactly what I want, only then loading them in through AJAX-requests.</p> <p>Of course, it might be that I can't use <i>these</i> templates that are rendered by the Master-page for some reason (maybe it's expecting to always be called in a certain context from a certain place or so). But maybe there's another clean solution for how to build your template-pages and fetching them from the Master-page.</p> <p>Who has a nice solution for implementing such thing, a Single Page Interface?</p> <p>PS: I'm developing in Visual Web Developer 2008 Express Edition with MVC 1.0 installed, in C#</p> <p><strong>[edit]</strong> Below I read that working with the templates is possible and that jQuery looks indeed like inevitable, so I tested it. The following code transforms regular links created by Html.ActionLink into anchor-links (with #) to contain history, and then fetch the page via AJAX and only injecting the html-part I'm interested in (i.e. the partial page inside div#partialView):</p> <pre><code>$("a").each(function() { $(this).click(function() { $("div#partialView").load($(this).attr("href") + " div#partialView"); location.hash = $(this).attr("href"); return false; }); }); </code></pre> <p>These links also allow for graceful degredation.</p> <p>But what I have left now, is still fetching the <i>whole</i> page instead of only the partial page. Altering the controller didn't help; it still provided me html of the whole page, with all of these statements:</p> <pre><code>public ActionResult About() { return View(); return View("About"); return PartialView(); return PartialView("About"); } </code></pre> <p>How could I only return the content of the part I'm interested in (i.e. the contents of Home/About.aspx)? What I'd like is POSTing a value with AJAX (e.g. "requesttype=ajax") so that my controller knows the page is fetched via AJAX and only returns the partial page; otherwise it will return the whole page (i.e. when you visit /Home/About instead of #Home/About).</p> <p>Is a good practice to alter Global.asax.cs maybe, to create a new routing schema for AJAX-calls, which will only return partial pages? (I haven't looked into this much, yet.)</p> <p><b>[edit2]</b> Robert Koritnik was right: I also needed an About.ascx page (UserControl) with only the small HTML-content of that page. The first line of About.aspx was linked with the Master-page via <code>MasterPageFile="~/..../Site.master"</code> which caused that all HTML was printed.</p> <p>But to be able to execute the following in my controller:</p> <pre><code>public ActionResult About() { return Request.IsAjaxRequest() ? (ActionResult)PartialView() : View(); } </code></pre> <p>I needed to alter the way a <code>PartialView</code> (.ascx file) and a <code>View</code> (.aspx) file was found, otherwise both methods would return the same page (<code>About.aspx</code>, ultimately resulting in an infinite loop). After putting the following in <code>Global.asax.cs</code>, the correct pages will be returned with <code>PartialView()</code> and <code>View()</code>:</p> <pre><code>protected void Application_Start() { foreach (WebFormViewEngine engine in ViewEngines.Engines.Where(c =&gt; c is WebFormViewEngine)) { /* Normal search order: new string[] { "~/Views/{1}/{0}.aspx", "~/Views/{1}/{0}.ascx", "~/Views/Shared/{0}.aspx" "~/Views/Shared/{0}.ascx" }; */ // PartialViews match with .ascx files engine.PartialViewLocationFormats = new string[] { "~/Views/{1}/{0}.ascx", "~/Views/Shared/{0}.ascx" }; // Views match with .aspx files engine.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.aspx", "~/Views/Shared/{0}.aspx" }; } RegisterRoutes(RouteTable.Routes); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USstarblue
    1. USfibbers
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do you build a Single Page Interface in ASP.NET MVC?
      1. USDavy Landman
      1. VTFavorite
    2. VO
      singulars
      1. POHow do you build a Single Page Interface in ASP.NET MVC?
      1. USRagesh
      1. VTFavorite
    3. VO
      singulars
      1. POHow do you build a Single Page Interface in ASP.NET MVC?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAre you asking for CRUD defined by the same route? i.e. http://localhost/Admin/ and the page would allow you to create, read, update, and delete administrators without having to do /Admin/Create?
      singulars
      1. POHow do you build a Single Page Interface in ASP.NET MVC?
      1. USKezzer
    2. CONo, I wanted to know what the "best practice" would be to have a SPI with ASP.NET. Not really anything specific, but just how one would start building a webapp with that technology (SPI). But it seems you have an answer prepared when it would be the case I'm asking for CRUD? :)
      singulars
      1. POHow do you build a Single Page Interface in ASP.NET MVC?
      1. USfibbers
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload