Question

How to render partial view in some specific div without using ajax in asp.net mvc 3???

For example I have a model:

public class TestViewModel
{
    public string FullText
    {
        get
        {
            retrun "Full text";
        }
    }
    public string ShortText
    {
        get
        {
            return "Short text";
        }
    }
}

Main view:

@model TestViewModel
   ...      
    <div id="RenderHere">

    </div>
    @Html.ActionLink("Show short text");
    @Html.ActionLink("Show full text");
   ...

And tow partial views:

ShortTextParial

@model TestViewModel
@Html.LabelFor(m => m.ShortText);
@Model.ShortText;

and FullTextPartial

@model TestViewModel
@Html.LabelFor(m => m.FullText);
@Model.FullText;

How can I render, for example, ShortTextPartial in “RenderHere” div after presing “Show short text” actionlink WITHOUT using ajax??? I have already found such solutions, but they don’t fit me.

P.S. I don’t want to use Ajax because if Java script is disabled on client side the page will not work correctly.

Answer 1

First of all I have to say I don’t think your design is the best. Please notice that most of the logics, comparisons, and conditions should take place in your Models and Business Logic tier, rather than in Views and Controllers.

Anyway, If you don’t want to use AJAX, you should either use URL parameters or Session States to pass data between pages. Having said that, I developed it by URL parameters.

(My development environment is VS2010 SP1, ASP.NET 4, MVC 3)

First we need to change TextViewModel like this:

public class TextViewModel
{
    public string FullText { get { return "Full text"; } }
    public string ShortText { get { return "Short text"; } }

    public string ViewMode { get; private set; }

    public TextViewModel(string viewMode)
    {
        if (!string.IsNullOrWhiteSpace(viewMode))
            this.ViewMode = viewMode.Trim().ToLower();
    }
}

Now a little tweak on Controller:

public class HomeController : Controller
{
    public ActionResult Index(string id)
    {
        Models.TextViewModel model = new Models.TextViewModel(id);
        return View(model);
    }
}

and finally our view:

@model MvcApplication1.Models.TextViewModel
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<div id="RenderHere">
    @if (Model.ViewMode == "short")
    {
        @Html.Partial("ShortTextParial", Model)
    }
    @if (Model.ViewMode == "full")
    {
        @Html.Partial("FullTextPartial", Model)
    }
</div>
@Html.ActionLink("Show short text", "Index", new { id = "short" })
@Html.ActionLink("Show full text", "Index", new { id = "full" })

The application works well in my computer. I’ve uploaded the code here if you need it: http://goo.gl/9v2Ny

Again I want to say you can come up with a better design which doesn’t need any @if in the View or even in the Controller.