Improve company productivity with a Business Account.Sign Up

x
?
Solved

ASP.NET MVC 5 Partial View issue

Posted on 2014-02-19
7
Medium Priority
?
1,917 Views
Last Modified: 2014-02-26
Hi,
I'm working on coding a new website for my church.  However I'm having a problem where the Partial View not being rendered in the original view.  Instead it is populating a new page.  I have installed the jquery.unobtrusive-ajax.min.js.

StaffController.cs
public class StaffController : LightSpeedControllerBase<ModelUnitOfWork>
    {
        protected override LightSpeedContext<ModelUnitOfWork> LightSpeedContext
        {
            get { return MvcApplication.LightSpeedContext; }
        }
        //
        // GET: /Staff/
        [HttpGet]
        public ActionResult Index()
        {
            var churchStaff = UnitOfWork.Staffmembers.WithViewName("staffmembers").Where(staffmember => staffmember.Active && staffmember.Showasstaff)
                .OrderBy(staffmember => staffmember.Positionid)
                .ThenBy(staffmember => staffmember.Displayorder).ToList();

            var positions = from s in UnitOfWork.Staffpositions
                select s;

            var churchPositions = new SelectList(positions, "Id", "Name").ToList();
            churchPositions.Insert(0, new SelectListItem() { Selected = true, Text = "All", Value = "-1"});

            ViewData["StaffPositions"] = churchPositions;
            return View("Index", churchStaff);
        }

        [HttpPost]
        public PartialViewResult GetStaffByPosition(int pos)
        {
            var churchStaff =
               UnitOfWork.Staffmembers.WithViewName("staffmembers")
                   .Where(staffmember => staffmember.Active && staffmember.Showasstaff && staffmember.Positionid == pos)
                   .OrderBy(staffmember => staffmember.Displayorder).ToList();

            return PartialView("_churchstaff", churchStaff);
        }
	}

Open in new window


Index.cshtml
@using PCC.Site.Models;
@{
    ViewBag.Title = "Staff | Paragon Christian Church";
    var x = 0;
}
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

@section Slider
{    	<!-- - - - - - - - - - - - - - Page Header - - - - - - - - - - - - - - - -->		
	<section class="page-header">
		<div class="container">
			<h1>Staff</h1>
		</div><!--/ .container-->
	</section><!--/ .page-header-->
}

<section class="main container sbr clearfix">	
		
	<!-- - - - - - - - - - Breadcrumbs - - - - - - - - - - - - -->		
	<div class="breadcrumbs">
		<a title="Home" href="@Url.Action("Index", "Home")">Home</a>
		<span>Staff</span>
	</div><!--/ .breadcrumbs-->
    <!-- - - - - - - - - end Breadcrumbs - - - - - - - - - - - -->

    <div style="float: right; border: 1px">
        @using (Ajax.BeginForm("GetStaffByPosition", new AjaxOptions()
        {
            HttpMethod = "Post",
            UpdateTargetId = "staffdiv",
            InsertionMode = InsertionMode.Replace
        }))
        {
            <text><label for="test" style="float: left; display: block">Position: </label></text>
            @Html.DropDownList("pos", (IEnumerable<SelectListItem>)ViewData["StaffPositions"],new {onchange="this.form.submit();"})
        }
    </div><!--/ .widget-->
    <div id="staffdiv">
        @{Html.RenderPartial("_churchstaff");}
    </div>
</section>

Open in new window


_churchstaff.cshtml
@model List<PCC.Site.Models.Staffmember>
@{
    var x = 0;
}

@foreach (var person in Model)
{
    if (x > 0)
    {
        <div class="border-divider"></div>
    }

    <div class="four columns">
        <div class="bordered">
            <figure class="add-border">
                <a class="single-image" href="#">
                    <img src="
                        @if (string.IsNullOrEmpty(person.Staffimage))
                        {
                            @:images/temp/staff-img-1.jpg
                        }
                        else
                        {
                            @person.Staffimage
                        }
                        " alt="" />
                </a>
            </figure>
        </div><!--/ .bordered-->
			
    </div>
    <!--/ .four .columns-->

    <div class="twelve columns">
			
        <h4 class="with-desc" data-desc="(@(person.Position))">
            @if (person.Recruting)
            {
                <i>We are currently recruiting for this position.</i>
            }
            else
            {
                <text>@person.Firstname @person.Lastname</text>
            }
        </h4>
			
        @if (!person.Recruting)
        {
            <p>
                @(person.Description)
            </p>
        }
        <a href="#" class="button default small">
            @if (person.Recruting)
            {
                @:Email for details
            }
            else
            {
                @:Contact me
            }
        </a>
			
    </div>
    <!--/ .twelve .columns-->

    x++;
}

Open in new window

0
Comment
Question by:yewnix
  • 4
  • 3
7 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39873299
If you are talking about this HTML

    <div id="staffdiv">
        @{Html.RenderPartial("_churchstaff");}
    </div>

Open in new window


how is it rendered in the final output?
0
 

Author Comment

by:yewnix
ID: 39873408
In the beginning output from Index.cshtml it appears 100% correct.  However when I use the dropdown list and select a new position it then shows a new page with the filtered results(with no layout etc).
http://new.paragonchristian.com/Staff
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39873848
It looks like you have a GetStaffByPosition action method, but I can't see that one in a controller.

What view is shown in that action method?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:yewnix
ID: 39873863
It is in the StaffController.cs

[HttpPost]
        public PartialViewResult GetStaffByPosition(int pos)
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39874846
Too much code, too little time...

 [HttpPost]
        public PartialViewResult GetStaffByPosition(int pos)
        {
            var churchStaff =
               UnitOfWork.Staffmembers.WithViewName("staffmembers")
                   .Where(staffmember => staffmember.Active && staffmember.Showasstaff && staffmember.Positionid == pos)
                   .OrderBy(staffmember => staffmember.Displayorder).ToList();

            return PartialView("_churchstaff", churchStaff);
        }
	}

Open in new window


You shouldn't return a partial view as the ViewResult, you should return a full view that references the partial view.  The Index.cshtml view handles rendering the partial view.

   <div id="staffdiv">
        @{Html.RenderPartial("_churchstaff");}
    </div>

Open in new window

0
 

Accepted Solution

by:
yewnix earned 0 total points
ID: 39876779
I was able to solve my problem.  Your method did not solve my issue.  I still returned the PartialView as I was doing.
However I changed my main view.
@{
    Layout = "../Shared/_Layout.cshtml";
    ViewBag.Title = "Index";
}

<script>
    function OnChangeHandler() {
        $("form[name='positionForm']").trigger('submit');
    }
</script>

<h2>Index</h2>

@using(Ajax.BeginForm("AjaxTest", "Home", new AjaxOptions() { UpdateTargetId = "testdiv"}, new {@name = "positionForm"}))
{
    @Html.DropDownList("cat", (IEnumerable<SelectListItem>)ViewBag.MovieType, new { onchange = "OnChangeHandler();"})
}
<div id="testdiv">
   @Html.Partial("Partial1")
</div>

Open in new window

0
 

Author Closing Comment

by:yewnix
ID: 39888288
I found my own solution.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
Free Data Recovery software is an advanced solution from Kernel Tools to recover data and files such as documents, emails, database, media and pictures, etc. It supports recovery from physical & logical drive after a hard disk crash, accidental/inte…
When you have multiple client accounts to manage, it often feels like there aren’t enough hours in the day. With too many applications to juggle, you can’t focus on your clients, much less your growing to-do list. But that doesn’t have to be the cas…

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question