I am having the following
<form action="<%=Url.Action("PasswordDetails",new{Controller = "User"}) %>" method="post" name="PasswordForm" id="PasswordForm" enctype="multipart/form-data">
However, the $("#PasswordForm").submit(function() {
if (validate())
return true;
else
return false;
}); isn`t being passed through.
What is wrong?
<% using (Html.BeginForm("PasswordDetails", "User", FormMethod.Post, new { id = "PasswordForm" }))
{ %>
Your view page should look like this:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.BeginForm("PasswordDetails", "User",
FormMethod.Post, new { id = "PasswordForm" }))
{ %>
<input type="password" id="sitepassword" />
<input type="submit" value="Submit" />
<% } %>
</asp:Content>
and your site master like this:
<body>
<div class="page">
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
function validate() {
alert('hello');
}
$(document).ready(function () {
$("#PasswordForm").submit(function () {
if (validate()) return true;
else return false; });
});
</script>
</body>
Related
I'm currently working on a ASP.NET MVC project. The sites of the web application are created with Bootstrap. Later I added some AngularJS script to be able to translate the page into different languages. This works fine for all the pages, but not so if a partial view is loaded from a page.
So, for example I have a page to search for rollout objects by name or host name. On the page all the angular expressions in curly braces are evaluated properly and are replaced with strings in several languages by using a translate script. Now if I filter the objects by one of the three attributes the partial view for that page is loaded showing the results of the search, but here are the angular expressions not evaluated and it just shows the expressions themselves.
Here is the page where it works properly:
#{
ViewBag.Title = "{{ 'ROLLOUT-OBJECT_MANAGEMENT.TITLE' | translate }}";
}
<!-- html -->
<div style="font-size: 20px; margin-top: 20px; margin-bottom: 20px;">
<div class="gray-background list-group-item" translate="{{'ROLLOUT-OBJECT_MANAGEMENT.TITLE'}}"></div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<div class="row margin-bottom">
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.FIRST_NAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.SURNAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.HOST_NAME'}}"></h6>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iFirstName" name="iFirstName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iSurName" name="iSurName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iHostName" name="iHostName" placeholder="">
</div>
<div class="col-md-3">
<!-- getPartial() added to click through javascript-->
<button type="submit" class="btn btn-primary btn-block" id="iButton"><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.BUTTON_SEARCH'}}"></span><span class="white-color glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<h5><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.RESULTS'}}"></span><span class="purple-color glyphicon glyphicon-globe"></span></h5>
</div>
<!-- referenced in getPartial() -->
<div class="gray-background list-group-item">
<div class="row">
<div class="col-md-12" id="partialViewContainer">
#{Html.RenderPartial("_RolloutObjectManagementResultsPartial");}
</div>
</div>
</div>
</div>
<!-- layout -->
#Styles.Render(
"~/content/chosen/chosen.css",
"~/content/chosen/prism.css",
"~/content/chosen/style.css",
"~/content/bootstrap.css",
"~/content/Site.css")
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script>
//add functionality to button
$('#iButton').click(function () {
getPartial('0');
});
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
//alert(xhr.responseText);//debug
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
And here is the partial view where it doesn't work (important are the expressions in {{...}}:
<!-- Import needed namespaces -->
#using RolloutTool.BusinessLayer.Foundation
#using RolloutTool.Utility
<!-- Initializing needed variables -->
#{
List<RolloutObject> RolloutObjects = ViewContext.Controller.ViewBag.RolloutObjects;
List<Cluster> Clusters = ViewContext.Controller.ViewBag.Clusters;
string name = "";
int count = 0;
string rowID = "";
int page = 0;
if (ViewContext.Controller.ViewBag.Page != null)
{
page = ViewContext.Controller.ViewBag.Page;
}
}
<!-- html elements -->
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EMPLOYEE'}}"></h6></th>
<th style="width:20%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.WORK_STATION'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EDIT'}}"></h6></th>
<th class="text-center" style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.CLUSTER'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.ASSIGN'}}"></h6></th>
</tr>
</thead>
<tbody>
<!-- creating all RolloutObject Table rows -->
#foreach (RolloutObject ro in RolloutObjects)
{
<!-- generating rowID -->
rowID = "row" + Convert.ToString(count);
count++;
<!-- generating the full employee name -->
name = Functions.TryGetValue(ro.Employee.FirstName) + " " + Functions.TryGetValue(ro.Employee.SecondName) + " " + Functions.TryGetValue(ro.Employee.Name);
<tr id="#rowID">
<td>#name</td>
<td id="#Convert.ToString(rowID + "_hn")">#Convert.ToString(Functions.TryGetValue(ro.Hostname))</td>
<!-- generate link to right rolloutobjectedit -->
<td class="text-center"><span class="btn-pencil glyphicon glyphicon-pencil blue-color glyph-hov" onclick="location.href='#Url.Action("RolloutObjectEdit", "RolloutObject", new {hostName = ro.Hostname })'"></span></td>
<!-- generating the link for cluster addition and populating cluster dropdown -->
<td class="text-center">
<div class="row">
<div class="col-sm-12">
<select class="chosen-select no-margin" style="width:100%" id="#Convert.ToString(rowID + "_cl")" name="iCluster" data-placeholder="Cluster">
#if (ro.Cluster != null)
{
<option selected>#Convert.ToString(Functions.TryGetValue(ro.Cluster.Name))</option>
}
else
{
<option></option>
}
#foreach (Cluster cluster in Clusters)
{
<option>#Convert.ToString(Functions.TryGetValue(cluster.Name))</option>
}
</select>
</div>
</div>
</td>
<td class="text-center"><span class="btn-ok glyphicon glyphicon-ok green-color glyph-hov" onclick="callAjax('#rowID')" /></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="hidden" id="hPage" value="#Convert.ToString(page)" />
<nav>
<ul class="pager">
<li class="pull-left"><a class="btn-paging glyphicon glyphicon-arrow-left" onclick="previous()"></a></li>
<li class="pull-right"><a class="btn-paging glyphicon glyphicon-arrow-right" onclick="next()"></a></li>
</ul>
</nav>
</div>
</div>
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script>
function callAjax(idRow) {
//get row values
var tempTD = document.getElementById(idRow + "_hn");
var tempSelect = document.getElementById(idRow + "_cl");
var tempHostName = tempTD.textContent;
var tempCluster = tempSelect.options[tempSelect.selectedIndex].text;
//ajax call
$.ajax({
url: "AddToCluster",
type: "POST",
data: { clusterName: tempCluster, hostName: tempHostName },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
This is the _Layout.cshtml where the scripts are contained and loaded:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - {{ 'TITLE.PROGRAM' | translate }}</title>
#Styles.Render(
"~/Content/css",
"~/Content/flag-icon-css-master/assets/docs.css",
"~/Content/flag-icon-css-master/css/flag-icon.min.css",
"~/Content/Site.css")
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-translate.js"></script>
<script src="~/Scripts/angular/angular-cookies.min.js"></script>
<script src="~/Scripts/angular/translate.js"></script>
<script src="~/Scripts/angular/angular-route.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-cookie.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-local.min.js"></script>
</head>
<body ng-controller="Ctrl">
<!-- Here is the html for the navigation bar etc. -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am really not an expert on AngularJS as I only wanted to provide some cool translation feature, but I hope you guys have an idea why it doesn't work in the partial views.
Its just that you need to call the partial view using ng-include("'controller/action'"). Apostrophe(') is important while writing url.
Example
<div id="TestDiv" ng-include="templateUrl"></div>
and inside the angular controller
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope, $http, $sce) {
//Initially
$scope.templateUrl = '/Home/DefaultPage';
// To dynamically change the URL.
$scope.NewProjFn = function () {
$scope.templateUrl = '/Home/ProjectPage';
};
});
It might well not at all be difficult for you to re-implement it but by using ng-include you also need not to make an ajax call. It do it all by itself which includes ajax call, compilation and display. But the functions like ng-click and other events will not work as its a one time compilation process.
I have found this JSFiddle that clear text from input? http://jsfiddle.net/xavi3r/D3prt/
How do I use this for Html.TextBox in razor View in MVC and then refresh page?
So far my solution is this (it works):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
//this part clean text from textboxes
$('#button').click(function () {
$(':input', '#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
//this part submit my search button - it is like refresh button, returns state as it was in begin - this is the same as I click on search without entering parameters
$('#button').click(function () {
document.myForm.onSubmit.click();
});
});
</script>
using (Html.BeginForm("Index", "LoginUser", FormMethod.Get, new { id = "form", name = "myForm"}))
{
<div class="form-group">
#Html.TextBox("order", Model.Search.Order, new { placeholder="Luška št.", id ="quantity1", #class="quantity form-control"})
<button type="submit" class="btn btn-primary" name="onSubmit">Search</button>
<input type="button" class="btn btn-primary" value="Clear" id="button" />
</div>
}
In _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
Realy thanks for help...
Your view will be rendered like this as html:
<div class="form-group">
<input type="text" name="order" id="quantity1" placeholder="Luška št." class="quantity form-control" value="SomeValue" />
<input type="button" />
</div>
and you can do it with this code:
$(function () {
$('.form-group input:button').click(function () {
$('input#quantity1').val('');
});
});
I'm writing a tabbed page websystem in ASP.NET MVC3 and when I use ajax.BeginForm. The partial view isn't used to update the div but is show as a page.
What is wrong with the code? And why isn't it working? Thanks for the help!
I'm to figuring it out but can't get my head around it. Here is my code:
Controller:
public ActionResult Index(int id)
{
var shareholder = db.shareholder.Include("company").Include("groups");
return PartialView("Index", shareholder.ToList());
}
//
// GET: /Shareholder/Create
public PartialViewResult Create()
{
ViewBag.company_id = new SelectList(db.company, "id", "name");
ViewBag.groups_id = new SelectList(db.groups, "id", "name");
return PartialView("Create");
}
//
// POST: /Shareholder/Create
[HttpPost]
public ActionResult Create(shareholder shareholder)
{
if (ModelState.IsValid)
{
db.shareholder.AddObject(shareholder);
db.SaveChanges();
return RedirectToAction("Index", new { id = shareholder.company_id });
}
ViewBag.company_id = new SelectList(db.company, "id", "name", shareholder.company_id);
ViewBag.groups_id = new SelectList(db.groups, "id", "name", shareholder.groups_id);
return PartialView("Create", shareholder);
}
partial View:
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>"
type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
<% using (Ajax.BeginForm("Create", "Shareholder", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "tabs-2", InsertionMode = InsertionMode.Replace }))
{ %>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>shareholder</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.company_id, "company") %>
</div>
<div class="editor-field">
<%: Html.DropDownList("company_id", String.Empty) %>
<%: Html.ValidationMessageFor(model => model.company_id) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.name) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.name) %>
<%: Html.ValidationMessageFor(model => model.name) %>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>
The view that is calling the partial view:
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>"
type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
<script type="text/javascript">
var count = 2;
$(document).ready(function() {
$("#tabs").tabs();
getContentTab (1, "/Company/Details/<%=Model.id %>");
});
function getContentTab(index, url) {
$.ajax({
url: url,
success: function(result) {
for (var i = 0; i <= count; i++) {
document.getElementById("tabs-" + index).style.display = 'none';
}
$("#tabs-" + index).html(result);
document.getElementById("tabs-" + index).style.display = 'block';
$.validator.unobtrusive.parse("form");
},
error: function (xhr, status, error) {
alert(error);
},
});
}
</script>
<h2>
<%=Model.name %></h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1" onclick="getContentTab(1, '/Company/Details/<%=Model.id %>');">
<%= VOWWebsite.Resource.Details%></a></li>
<li><a href="#tabs-2" onclick="getContentTab(2, '/Shareholder/Index/<%=Model.id %>');">
<%= VOWWebsite.Resource.Shareholders%></a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
</div>
You have to include jquery.unobtrusive-ajax.min.js in your page:
<script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>"
type="text/javascript"></script>
I am just trying to learn how to use JQuery AJAX with ASP.NET MVC so I have constructed a page which allows you to add and remove comments to a list. The only thing that doesn't work is deleting comments that have just been added through an AJAX call. The comments are deleted from the database but the page is reloaded instead of the AJAX being executed. This is only on comments that have just been added through AJAX. The AJAX delete works fine on comments that were already there when the page loaded.
I have a single View, and a Partial View which holds the html for a new comment. This html is then appended to the comments div in the View when a comment is added.
Note: I want this to be javascript independent, so my delete button on each comment is in its own form that will perform a POST if javascript is disabled.
View (Index.aspx)
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<AJAXComments.Models.Comment>>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
<link rel="Stylesheet" type="text/css" href="../../Content/Styles/Master.css" />
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<div id="Container">
<h2>Comments</h2>
<div id="Comments">
<% foreach (var c in Model)
{ %>
<div class="comment">
<input class="id" type="hidden" value="<%: c.Id %>" />
<div class="author">Posted by <%: c.User %></div>
<div class="comment-text">
Posted <%: c.DateTimePosted %>
<p><%: c.CommentText %></p>
<% using (Html.BeginForm("DeleteComment", "Home", new { id = c.Id }, FormMethod.Post, new { #class = "DeleteForm" }))
{ %>
<input type="submit" value="Remove" />
<% } %>
</div>
</div>
<% } %>
</div>
<div id="AddComment">
<% using (Html.BeginForm("AddComment", "Home", FormMethod.Post, new { id = "AddCommentForm" }))
{ %>
<label for="User">Your Name:</label>
<input name="User" id="User" type="text" /><br />
<label for="CommentText">Comment:</label>
<textarea name="CommentText" id="CommentText" rows="5" cols="10"></textarea><br />
<input id="Submit" type="submit" value="Submit" />
<input id="Reset" type="reset" class="hidden" />
<% } %>
</div>
<p class="response"></p>
</div>
</body>
</html>
Partial View
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AJAXComments.Models.Comment>" %>
<div class="comment hidden">
<input class="id" type="hidden" value="<%: Model.Id %>" />
<div class="author">Posted by <%: Model.User %></div>
<div class="comment-text">
Posted <%: Model.DateTimePosted %>
<p><%: Model.CommentText %></p>
<% using (Html.BeginForm("DeleteComment", "Home", new { id = Model.Id }, FormMethod.Post, new { #class = "DeleteForm" }))
{ %>
<input type="submit" value="Remove" />
<% } %>
</div>
</div>
Controller ActionResult
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DeleteComment(int id)
{
var comment = commentsRep.GetCommentById(id);
if (Request.IsAjaxRequest())
{
commentsRep.DeleteComment(comment);
return Json("Comment removed");
}
else
{
commentsRep.DeleteComment(comment);
return RedirectToAction("Index");
}
}
JQuery
$(document).ready(function () {
$('#AddCommentForm').submit(function (e) {
e.preventDefault();
var form = {
'User': $('#User').val(),
'CommentText': $('#CommentText').val()
};
$.ajax({
url: '/Home/AddComment',
type: 'POST',
data: form,
success: function (html) {
$('#Comments').append(html);
$('.comment').slideDown('normal', function () {
$(this).removeClass('hidden');
});
$('#Reset').trigger('click');
}
});
});
$('.DeleteForm').submit(function (e) {
e.preventDefault();
var id = $(this).parent().siblings("input.id").val();
var comment = $(this).parent().parent('.comment');
$.ajax({
url: '/Home/DeleteComment',
type: 'POST',
data: { id: id },
success: function (response) {
$('p.response').append(response);
comment.slideUp('normal', function () {
comment.remove();
});
}
});
});
});
Appreciate any help!
Instead of:
$('.DeleteForm').submit(function(e) {});
You should use:
$('#Comments').delegate('.DeleteForm', 'submit', function(e) {...});
That will automatically bind the event on new forms loaded to the page.
I cannot for the life of me figure out why this postback sometimes does an ajax one as it is supposed to and sometimes it does not. Here is the relevant code:
JS:
<html>
<head>
<title>Index</title>
<link href="/Content/screen.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link href="/Content/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href="/Content/plugins/fancy-type/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/buttons/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/link-icons/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="/Content/jQueryUI/css/cupertino/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/HelpDesk.css" rel="stylesheet" type="text/css" />
<link href="/Content/droppy.css" rel="stylesheet" type="text/css" />
<link href="/Content/tablesorter.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.droppy.js" type="text/javascript"></script>
<script src="/Scripts/jquery.cascadingDropDown.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
$('#nav').droppy();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#targetStartDate").datepicker();
$("#targetEndDate").datepicker();
$("#ticketsHTMLTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
$(".fakeLink").mouseover(function () {
$(this).css("color", "red");
});
$(".fakeLink").mouseout(function () {
$(this).css("color", "black");
});
});
</script>
</head>
Here is my View (Razor):
#using (Ajax.BeginForm("Index", "Problem", new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ticketsTable",
InsertionMode = InsertionMode.Replace
}))
{
<div class="notice">
<div class="prepend-1 span-2">
<label for="targetPriorityID">
Priority</label>
</div>
<div class="prepend-1 span-3">
<label for="targetStatusID">
Status</label>
</div>
<div class="span-3">
<label for="targetBusinessUnitID">
Business Unit</label>
</div>
<div class="span-3 prepend-1">
<label for="targetStartDate">
Start Date</label></div>
<div class="span-3 prepend-2">
<label for="targetEndDate">
End Date</label></div>
<div class="prepend-1 span-3 last">
 
</div> <div class="prepend-1 span-2">
#Html.DropDownList("targetPriorityID",
new SelectList(ViewBag.Priorities as System.Collections.IEnumerable,
"ID", "Title"), "All", new { #onchange = " this.form.submit();" })
</div>
<div class="prepend-1 span-3">
#Html.DropDownList("targetStatusID",
new SelectList(ViewBag.Statuses as System.Collections.IEnumerable,
"ID", "Title"),"All", new { #onchange="this.form.submit();" })
</div>
<div class="span-3">
#Html.DropDownList("targetBusinessUnitID",
new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable,
"ID", "Title"), "All", new { #onchange = "this.form.submit();" })
</div>
<div class="span-3 prepend-1">#Html.TextBox("targetStartDate", "", new { onchange = "this.form.submit();" })</div>
<div class="span-3 prepend-2">#Html.TextBox("targetEndDate", "", new { onchange = "this.form.submit();" })</div>
<div class="prepend-1 span-3 last">
<input type="submit" value="Hide" />
</div>
<br />
<br />
<br />
</div>
}
<div id="ticketsTable">
#Html.Partial("_AllTickets", Model)
</div>
And finally the controller,
[HttpPost]
public ActionResult Index(int targetPriorityID = -1, int targetBusinessUnitID = -1, int targetStatusID = -1, string targetStartDate = "", string targetEndDate ="")
{
Repository<Priority> priorityRepository = new Repository<Priority>();
Repository<BusinessUnit> businessUnitRepository = new Repository<BusinessUnit>();
Repository<Status> statusRepository = new Repository<Status>();
ViewBag.Priorities = priorityRepository.GetAll();
ViewBag.BusinessUnits = businessUnitRepository.GetAll();
ViewBag.Statuses = statusRepository.GetAll();
var results = problemRepository.GetAll();
results = (targetPriorityID != -1) ? results.Where(t => t.PriorityID == targetPriorityID) : results;
results = (targetBusinessUnitID != -1) ? results.Where(t => t.BusinessUnitID == targetBusinessUnitID) : results;
results = (targetStatusID != -1) ? results.Where(t => t.StatusID == targetStatusID) : results;
results = (targetStartDate != "") ? results.Where(t => t.DateReported >= DateTime.Parse(targetStartDate)) : results;
results = (targetEndDate != "") ? results.Where(t => t.DateReported <= DateTime.Parse(targetEndDate)) : results;
if (Request.IsAjaxRequest())
{
return PartialView("__AllTickets", results);
}
return View(results);
}
Any thoughts?
I would suggest you to use normal form that will be AJAXified later:
#using (Html.BeginForm("Index", "Problem")
{
<div class="notice">
<div class="prepend-1 span-2">
<label for="targetPriorityID">Priority</label>
</div>
<div class="prepend-1 span-3">
<label for="targetStatusID">Status</label>
</div>
<div class="span-3">
<label for="targetBusinessUnitID">Business Unit</label>
</div>
<div class="span-3 prepend-1">
<label for="targetStartDate">Start Date</label></div>
<div class="span-3 prepend-2">
<label for="targetEndDate">End Date</label>
</div>
<div class="prepend-1 span-3 last">
 
</div>
<div class="prepend-1 span-2">
#Html.DropDownList("targetPriorityID", new SelectList(ViewBag.Priorities as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="prepend-1 span-3">
#Html.DropDownList("targetStatusID", new SelectList(ViewBag.Statuses as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="span-3">
#Html.DropDownList("targetBusinessUnitID", new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="span-3 prepend-1">
#Html.TextBox("targetStartDate", "")
</div>
<div class="span-3 prepend-2">
#Html.TextBox("targetEndDate", "")
</div>
<div class="prepend-1 span-3 last">
<input type="submit" value="Hide" />
</div>
<br />
<br />
<br />
</div>
}
<div id="ticketsTable">
#Html.Partial("_AllTickets", Model)
</div>
and then in a separate file AJAXify it:
$(function() {
$('form :input').change(function() {
var form = $('form');
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(result) {
$('#ticketsTable').html(result);
}
});
});
});
Another improvement I that I would suggest you is to use view models and get rid of ViewData and use strongly typed helpers.
One problem I can see is that your AJAX options in your Razor view specify the GET HTTP method, but the action filter on the controller action specifies POST.
I wonder if Request.IsAjaxRequest() is causing the problem. I would look at removing that code and always return PartialView("__AllTickets", results); instead.