I'm newbie in building websites I'm using Razor C# in Webmatrix and I need help with progress bar while importing CSV files in my code. Below you can see my source.
#{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Import CSV";
}
#using System.Data;
#using System.Data.OleDb;
#using Microsoft.Web.Helpers;
#{
// Upload File
var fileName = "";
if ((IsPost) && (Request["Action"]!="Delete") && Request["Action"]!="Import" && (Request.Files[0].FileName!="")) {
var fileSavePath = "";
var uploadedFile = Request.Files[0];
fileName = Path.GetFileName(uploadedFile.FileName);
fileSavePath = Server.MapPath("~/Uploads/" + fileName);
uploadedFile.SaveAs(fileSavePath);
}
// Import File
bool importSuccess = false;
if (IsPost && Request["Action"]=="Import"){
// Initialize connection variables
string ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" +
Server.MapPath("~/Uploads/") + #"; Extended Properties=""text;HDR=Yes;"";";
string CommandText = "select * from "+Request["filename"];
OleDbConnection myConnection = new OleDbConnection(ConnectionString);
OleDbCommand myCommand = new OleDbCommand(CommandText, myConnection);
DataSet dataset = new DataSet();
var insertCSV = "";
var rowNum = 0;
// Open connection
myConnection.Open();
// Fill DataSet
OleDbDataAdapter oda = new OleDbDataAdapter(myCommand);
oda.Fill(dataset);
// Close connection
myConnection.Close();
var db = Database.Open("StarterSite");
// Transactions
if(Request.Form["ImportType"]=="Transactions"){
string var0;
int var1;
string var2;
string var3;
string var4;
string var5;
string var6;
string var7;
string var8;
int var9;
DateTime var10;
decimal var11;
decimal var12;
string var13;
int count = dataset.Tables[0].Rows.Count;
while(rowNum <= dataset.Tables[0].Rows.Count-1){
var0=dataset.Tables[0].Rows[rowNum][0].ToString();
var1=Convert.ToInt32(dataset.Tables[0].Rows[rowNum][1].ToString());
var2=dataset.Tables[0].Rows[rowNum][2].ToString();
var3=dataset.Tables[0].Rows[rowNum][3].ToString();
var4=dataset.Tables[0].Rows[rowNum][4].ToString();
var5=dataset.Tables[0].Rows[rowNum][5].ToString();
var6=dataset.Tables[0].Rows[rowNum][6].ToString();
var7=dataset.Tables[0].Rows[rowNum][7].ToString();
var8=dataset.Tables[0].Rows[rowNum][8].ToString();
var9=Convert.ToInt32(dataset.Tables[0].Rows[rowNum][9].ToString());
var10=Convert.ToDateTime(dataset.Tables[0].Rows[rowNum][10].ToString());
var11=Convert.ToDecimal(dataset.Tables[0].Rows[rowNum][11].ToString());
var12=Convert.ToDecimal(dataset.Tables[0].Rows[rowNum][12].ToString());
var13=dataset.Tables[0].Rows[rowNum][13].ToString();
rowNum++;
insertCSV = "INSERT INTO Transactions (TransactionType, TransactionNumber, DeliveryAcc, AccountName, RepCode, CustCode, PartNo, Description, ProductGroup, Qty, TransactionDate, Sales, Cost, InvoiceAcc) VALUES(#0, #1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13)";
db.Execute(insertCSV, var0, var1, var2, var3, var4, var5, var6, var7, var8, var9, var10, var11, var12, var13);
}
importSuccess = true;
}
// Rep Codes
if(Request.Form["ImportType"]=="RepCodes"){
string var0;
string var1;
// Customer Types
}
if(Request.Form["ImportType"]=="CustTypes"){
}
}
// Delete File
bool deleteSuccess = false;
var fileNameDelete = "";
if (IsPost && (Request["Action"]=="Delete")) {
fileNameDelete = Request["filename"];
var fullPath = Server.MapPath("~/Uploads/" + fileNameDelete);
if (File.Exists(fullPath))
{
File.Delete(fullPath);
deleteSuccess = true;
}
}
}
<hgroup class="title">
<h1>#Page.Title.</h1>
<h2></h2>
</hgroup>
<div>
<h1>File Upload</h1>
#FileUpload.GetHtml(
initialNumberOfFiles:1,
allowMoreFilesToBeAdded:false,
includeFormTag:true,
uploadText:"Upload"
)
#if (IsPost && Request["Action"]!="Delete" && Request["Action"]!="Import" && Request.Files[0].FileName!="") {<span>File uploaded!</span><br/>}
<h2>List of available files:</h2>
#if(deleteSuccess){
<h5>File #Request["filename"] deleted!!!</h5>
}
#if(importSuccess){
<h5>File #Request["filename"] imported!!!</h5>
}
<table>
<tr>
<th>File Name</th>
<th>Action</th>
</tr>
#foreach (string fullFilePath in Directory.GetFiles(Server.MapPath("~/Uploads"))){
<tr>
<td>#Path.GetFileName(fullFilePath);</td>
#if(Path.GetFileName(fullFilePath).Substring(Path.GetFileName(fullFilePath).Length-3)=="csv"){
<td style="width: fit-content;">
<form method="post">
<select name="ImportType" style="width: auto;">
<option value="Transactions" SELECTED>Transactions</option>
<option value="RepCodes">Rep Codes</option>
<option value="CustTypes">Customer Types</option>
</select>
<input type="hidden" name="filename" value="#Path.GetFileName(fullFilePath)" />
<input type="submit" name="Action" value="Import" />
<input type="submit" name="Action" value="Delete" />
</form>
</td>
}else{
<td>
<form method="post">
<input type="hidden" name="filename" value="#Path.GetFileName(fullFilePath)" />
<input type="submit" name="Action" value="Delete" />
</form>
</td>
}
</tr>
}
</table>
</div>
As you can see my code already imports data and 600,000 records can be imported in less than minute but I want to show progress bar so user can see that website is doing something.
Any suggestions?
Thanks,
Thomas
Here is a javascript JQuery loader, untested but should work.
<head runat="server">
<title></title>
<meta http-equiv="x-ua-compatible" content="IE=9" />
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="Stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
function StartLoader() {
$("<div id='TheLoader'></div>")
.html("LOADING...")
.dialog({
modal: true,
position: ['center', 'middle'],
width: 150,
height: 90,
title: 'Loading',
resizable: false,
closeOnEscape: false,
open: function (event, ui) {
$(".ui-dialog .ui-dialog-titlebar-close").hide();
}
});
}
function EndLoader() {
$("#TheLoader").remove();
}
</script>
</head>
The closeOnEscape and open part in the Dialog keeps the user from being able to close the dialog.
Now to start the loading screen, call the StartLoader(); function from client side, and to close the loader, call the EndLoader(); function which will remove the div completely.
Sources: Google, JQuery UI, StackOverflow
EDIT: I have added a fiddle for the loader, check it out here
That is great. Now I know how to show modal dialogues. I changed html attribute of TheLoader
$("<div id='TheLoader'></div>")
.html('Please Wait...<br/><br/><div id="progress-holder"><div id="progress"></div></div><br/><span id="message">...</span>')
Is it possible to update width of:
<div id="progress">
while importing?
I tried with
function updateValue(perc) {
$("#progress").style.width = perc + "%"; }
but it doesn't work.
Related
When I try to submit information from client to server, I receive Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/>. I've tried most of the suggestions in the answers and they don't seem to be helping.
At the top of the .aspx page in question, adding EnableEventValidation="false" does solve the issue. However, I would like to this to remain as set to true.
I've also added (!Page.IsPostBack) in the code behind and this is still causing issues.
Could it be the jQuery timpicker that's causing the issue by inputting values based on what the user selects?
Code behind .cs
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
var DbHelper = new DbHelper();
listOfUsers.DataSource = DbHelper.UserList();
listOfUsers.DataBind();
}
else
{
string test = listOfUsers.SelectedValue;
string time = timePicker.Text;
string reason = ReasonForRemoval.Text;
}
}
}
.aspx file
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="xxxMyProjectNamexxx" EnableEventValidation="true"%>
<%--<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>--%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="/Styles/jquery-ui-timepicker-addon.css">
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('[id*=timePicker]').timepicker({
timeFormat: "hh:mm:ss"
});
});
</script>
<head>
<h2>
My App
</h2>
<p>
Enter relevant info
</p>
</head>
<body>
<form method="post">
<div>
<label for="UserName">User Name:</label>
<asp:DropDownList ID="listOfUsers" runat="server"></asp:DropDownList>
</div>
<br/><br/>
<table>
<tr>
<th>
<div>
<label for="Time">Time:</label>
<asp:TextBox ID="timePicker" runat="server"></asp:TextBox>
</div>
</th>
</tr>
</table>
<br/><br/>
<div>
<label for="Reason">Reaso:</label>
<br/>
<asp:TextBox ID="ReasonForRemoval" runat="server" TextMode="MultiLine" Rows="5" Width="400px" style="resize:none"></asp:TextBox>
</div>
<br/><br/>
<div>
<label> </label>
<input type="submit" value="Submit" class="submit" />
</div>
</form>
</body>
</asp:Content>
DbHelper.cs used to generate list
public class DbHelper
{
private EntityConnection entCon;
public DbHelper()
{
entCon = new EntityConnection(ConfigurationManager.ConnectionStrings["myConnString"].ConnectionString);
}
public List<string> UserList()
{
List<string> userList = new List<string>();
using(SqlConnection conn = (SqlConnection)entCon.StoreConnection)
using (SqlCommand cmd = new SqlCommand())
{
conn.Open();
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = "SELECT * FROM [MyDatabase].[dbo].[users]";
using (SqlDataReader objReader = cmd.ExecuteReader())
{
if (objReader.HasRows)
{
while (objReader.Read())
{
userList.Add(Convert.ToString(objReader[0]));
}
}
}
}
return userList;
}
}
}
I have to create a simple website using asp.net web forms, but I'm required to not use any server controls i.e. runat="server"
I have the following:
HTML
<form method="post" action="">
<label for="name">Name</label>
<input id="name" name="name" type="text" />
<input value="Save" type="submit" />
</form>
Code behind
protected void myFunction()
{
// do something
}
I'm currently putting // do something in the protected void Page_Load(object sender, EventArgs e) function, but I would like to call it when the save button is clicked. However I don't know how to do this without using runat="server". Is there a way of achieving this?
The real answer to this question is in the comment:
Using webforms but saying no runat="server" is like saying go kayaking, but no paddles. It sounds more like you should be using ASP.NET MVC
I'll add ASP.Net Web Pages as well for getting things done quickly (note: this doesn't mean ASP.Net Web Pages are only for "simple" sites - you can do whatever you want with it).
I have to create a simple website using asp.net web forms
But since it "has to" be WebForms it's still doable. Is it advisable? nope - particularly with aforementioned options as well as other comments on SPA/Javascript/XHR.
End of day, it's still HTTP Requests, and Responses, so standard HTML form inputs and such work just like in any other "framework":
the "front end" (well, Page is technically a control but we're sticking to WebForms so this will be the only "server control"):NoServerControls.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="NoServerControls.aspx.cs" Inherits="WebForms.NoServerControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Humor Me Batman</title>
</head>
<body>
<form method="post">
<input type="text" name="wtf"/>
<input type="submit" value="Batman"/>
</form>
<h1>It's "classic ASP" Batman! <%= echo %></h1>
</body>
</html>
the "back end" (NoServerControls.aspx.cs code behind)
public partial class NoServerControls : System.Web.UI.Page
{
public string echo { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
//Trivial example: skipping all validation checks
//It's either a GET or POST end of day
if (Request.RequestType == "POST")
{
//Do something with data, just echoing it here
echo = Request["wtf"];
}
}
}
Hth.
Batman :)
I have a working test project on this please refer this...
<table>
<tr>
<td>Name </td>
<td>
<input type="text" id="custid" class="form-control custname" name="fullname" required />
</td>
</tr>
<tr>
<td>Designation </td>
<td>
<select id="loading" class="form-control loading">
<option value="0">Select </option>
<option value="HR">HR </option>
<option value="Engg">Engg </option>
<option value="Doctor">Doctor </option>
</select>
</td>
</tr>
<tr>
<td>Mobile No. </td>
<td>
<input type="text" id="mobile" class="form-control mobile" onkeypress="return event.charCode >=48 && event.charCode <= 57" name="fullname" required />
</td>
</tr>
<tr>
<td>Email Id </td>
<td>
<input type="text" id="emailid" class="form-control emailid" name="fullname" required />
</td>
</tr>
<tr>
<td colspan="2" id="btn">
<button type="button" onsubmit="return validateForm()" class="btn btn-primary">Save</button>
</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('#btn').click(function () {
var CustNamevalidate = $('.custname').val();
if (CustNamevalidate != '') {
Name = $(".custname").val();
Loading = $(".loading").val();
Mobile = $(".mobile").val();
EmailId = $(".emailid").val();
$.ajax({
type: "POST",
url: "test.aspx/Complextype",
data: JSON.stringify({
Nam: Name, Loadin: Loading, Mobil: Mobile, EmailI: EmailId
}),
contentType: "application/json; charset=utf-8",
datatype: "json"
}).done(function (result) {
console.log(result);
alert(JSON.stringify(result));
})
}
else {
alert('Please Enter Customer Name');
}
});
});
</script>
Code Behind WEB MEthod
[WebMethod]
public static string Complextype(string Nam, string Loadin, string Mobil, string EmailI)
{
string Qtets = "Details are : Name =" + Nam + " And Designation is =" + Loadin + " And Mobileno=" + Mobil + " And EmailI=" + EmailI;
// ScriptManager.RegisterStartupScript(Page, typeof(Page), "test", "<script>alert('Sorry This Category Name Already Exist.');</script>", false);
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Constr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand("usp_add_upd_emptb", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#EmpName", Nam);
cmd.Parameters.AddWithValue("#EmpNo", Mobil);
cmd.Parameters.AddWithValue("#Desig", Loadin);
cmd.Parameters.AddWithValue("#Email", EmailI);
cmd.Parameters.AddWithValue("#id", 0);
con.Open();
cmd.ExecuteNonQuery();
if (con.State == ConnectionState.Open)
{
con.Close();
}
else
{
con.Open();
}
}
//SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Constr"].ConnectionString);
//{
//}
return Qtets;
}
you Can not call Function Directly if you are not using server controls for function to be called you need to have Web service with static function.
I have a website where you can take a multi-choice quiz. There can be 1 to 5 possible answers for each question in the quiz. I am having trouble figuring out how to dynamically making the controls for the quiz based on how many answers there are. I can get the number of answers easily.
so if there are 3 answers i need to generate 3 textboxes (readonly) and corresponding radiobutton list. Then when the user presses a button the data is submitted and the next question is loaded. I am trying to do this all in C#.
I once did exactly same but creating only textbox dynamically.I am copying my code(bit busy to make changes right now) ,please edit to your need:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</script>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function GetDynamicTextBox(value)
{
return '<input name = "DynamicTextBox" class="dynamic" type="text" value = "' + "mymonthname" + '" />' +
'<input name = "DynamicTextBox1" class="dynamic" type="text" value = "' + "myYearname" + '" />' +
'<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox()
{
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
function RemoveTextBox(div)
{
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
// function RecreateDynamicTextboxes() {
// var values = "vishal";
// if (values != null) {
// var html = "";
// for (var i = 0; i < values.length; i++) {
// html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
// }
// document.getElementById("TextBoxContainer").innerHTML = html;
// }
// }
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="TextBoxContainer" style="text-align: center;" class="step">
</div>
<div>
<div style="text-align: center;" id="setPrinteraxcis1">
<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" class="ANPClass" />
</div>
</div>
</form>
</body>
and to access the values,you need to write below code in .cs"
string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
if (textboxValues == null || textboxValues.Length == 0)
{
string empty = "true";
}
else
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
this.Values = serializer.Serialize(textboxValues);
foreach (string textboxValue in textboxValues)
{
MultipleId.Add(textboxValue);
}
}
where MultipleId is an arraylist:
public ArrayList MultipleId = new ArrayList();
P.S.
I read your requirement that you need on basis of some critteria,then you can use an counter in AddTextbox method and loop to create desired number of textbox.
I'm trying to upload an image with Fineuploader processing it with Razor (not MVC).
The error I get is:
Error when Attempting to parse XHR response text (Unexpected token {).
The code is this:
test.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="assets/fine-uploader.css" rel="stylesheet">
<link href="fineuploader-4.2.2.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.fineuploader-4.2.2.js"></script>
<script src="jquery.fineuploader-4.2.2.min.js"></script>
</head>
<body>
<div id="fine-uploader"></div>
<script src="assets/fine-uploader.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
</body>
</html>
fine-uploader.js
function createUploader() {
var uploader = new qq.FineUploader({
// Pass the HTML element here
// element: document.getElementById('fine-uploader'),
// or, if using jQuery
element: $('#fine-uploader')[0],
// Use the relevant server script url here
// if it's different from the default “/server/upload”
text: {
uploadButton: 'SELEZIONA FILE'
},
request: {
`enter code here` multiple: false,
validation: {
sizeLimit: 2147483648 //2GB
},
endpoint: 'FileUpload.cshtml',
forceMultipart: false,
customHeaders: { Accept: 'application/json' },
debug: true,
//
callbacks: {
onComplete: function (id, fileName, responseJSON) {
if (responseJSON.success) {
$('#imgPreview').html('<img src="~/Scripts/fineuploader/upload/' + filename + '" alt="' + filename + '">');
}
}
}
//
}
});
}
FineUpload.cshtml
#{
if(IsPost) {
var file = Request.Files[0];
var fileName = Path.GetFileName(file.FileName);
var rootPath = Server.MapPath("~/Scripts/fineuploader/upload/");
file.SaveAs(Path.Combine(rootPath, fileName));
// Json.Write(fileSavePath, Response.Output);
var json = Html.Raw(Json.Encode(new { link = #"~/Scripts/fineuploader/upload/" + fileName}));
//Response.ContentType = "text/plain";
Response.Write(json);
Response.ContentType = "application/json";
Response.Write("{\"success\":true}");
Response.End();
}
}
My code works perfectly in VS2010 C# but once published to IIS7 the PartialView (list of records) does not get rendered in the View...it rolls to a new page without the data except for the correct record count retrieved from SQL server. SQL server is on separate box.
I have searched for hours on this site with no luck finding a resolution.
View with the RenderPartial:
<table style="width:100%">
<tr>
<td>
<h3>Outage Tracking List (Open or Active)</h3>
</td>
<td style="text-align:right">
<h1><%: ViewData["ApplicationName"]%></h1>
</td>
</tr>
</table>
<% Html.RenderPartial("OutageSearch",this.ViewData.Model); %>
PartialView:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OutageTrackingWebSite.Models.OutageViewModel" %>
<div>
<script language="javascript" type="text/javascript">
function OutageSearch() {
$("#OutageSearchForm #CurrentPageNumber").val("1");
PostSearchForm();
}
Various functions then the rest of the partialview
<% using (Ajax.BeginForm("OutageSearch", null,
new AjaxOptions { UpdateTargetId = "DivOutageSearchResults", OnComplete="OutageSearchComplete" },
new { id = "OutageSearchForm" })) { %>
<table style="background-color: #ebeff2; width: 100%; border:solid 1px #9fb8e9" cellspacing="2" cellpadding="2">
<tr>
<td style="width: 60%; text-align: left">
<input id="btnSearch" onclick="OutageSearch();" type="submit" value="List Open/Active" />
</td>
</tr>
</table>
<div id="DivOutageSearchResults">
<% Html.RenderPartial("OutageSearchResults", this.ViewData.Model); %>
</div>
<% } %>
additional PartialView
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<%OutageTrackingWebSite.Models.OutageViewModel" >
<input name="CurrentPageNumber" type="hidden" id="CurrentPageNumber" value="<%=Model.CurrentPageNumber%>" />
<input name="TotalPages" type="hidden" id="TotalPages" value="<%=Model.TotalPages%>" />
<input name="SortBy" type="hidden" id="SortBy" value="<%=Model.SortBy%>" />
<input name="SortAscendingDescending" type="hidden" id="SortAscendingDescending" value="<%=Model.SortAscendingDescending%>" />
<input name="PageSize" type="hidden" id="PageSize" value="9" />
<script language="javascript" type="text/javascript">
function GetOutageDetails(OutageID) {
if (formIsDisabled == false) {
DisableForm();
formData = "OutageID=" + OutageID;
setTimeout(PostOutageIDToServer, 1000);
}
}
function PostOutageIDToServer() {
$.post("/Outage/GetOutageInformation", formData, function (data, textStatus) {
OutageUpdateComplete(data);
}, "json");
}
Controller
public ActionResult DisplayOutageList()
{
Models.OutageViewModel outageViewModel = new Models.OutageViewModel();
outageViewModel.TotalPages = 0;
outageViewModel.TotalRows = 0;
outageViewModel.CurrentPageNumber = 0;
ViewData.Model = outageViewModel;
string applicationName = Convert.ToString( System.Configuration.ConfigurationManager.AppSettings["ApplicationName"]);
ViewData["ApplicationName"] = applicationName;
return View("OutageMaintenance");
}
///
/// Outage Search
///
///
public PartialViewResult OutageSearch()
{
long totalRows;
long totalPages;
bool returnStatus;
string returnErrorMessage;
OutageBLL OutageBLL = new OutageBLL();
Models.OutageViewModel outageViewModel = new Models.OutageViewModel();
this.UpdateModel(outageViewModel);
List Outages = OutageBLL.OutageSearch(
outageViewModel,
outageViewModel.CurrentPageNumber,
outageViewModel.PageSize,
outageViewModel.SortBy,
outageViewModel.SortAscendingDescending,
out totalRows,
out totalPages,
out returnStatus,
out returnErrorMessage);
ViewData["Outages"] = Outages;
outageViewModel.TotalPages = totalPages;
outageViewModel.TotalRows = totalRows;
ViewData.Model = outageViewModel;
return PartialView("OutageSearchResults");
}
///
/// Get Outage Information
///
///
public JsonResult GetOutageInformation()
{
bool returnStatus;
string returnErrorMessage;
List returnMessage;
OutageBLL outageBLL = new OutageBLL();
Models.OutageViewModel outageViewModel = new Models.OutageViewModel();
this.TryUpdateModel(outageViewModel);
Outage outage = outageBLL.GetOutageInformation(
outageViewModel.OutageID,
out returnStatus,
out returnErrorMessage,
out returnMessage);
outageViewModel.UpdateViewModel(outage, typeof(Outage).GetProperties());
outageViewModel.ReturnMessage = returnMessage;
outageViewModel.ReturnStatus = returnStatus;
outageViewModel.OutageScheduledDate = UtilitiesBLL.FormatDate(outageViewModel.ScheduledDate);
outageViewModel.OutagePlannedDuration = UtilitiesBLL.FormatDuration(outageViewModel.PlannedDuration);
return Json(outageViewModel);
}
Check your included JavaScript files on the deployed version. If you are missing some files (MicrosoftMvcAjax.js, jQuery.js), the page could simply be posting instead of using an Ajax post.