Solved

ASP.NET MVC 5 Partial View issue

Posted on 2014-02-19
7
1,688 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…

632 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