Submit button is not disabling on ASP.NET MVC page - asp.net-mvc

I have BackoutClaim page. On the Submit button click, I have to disable the button and from the POst method, when the response comes back, I have to enable button back.
In the below code, the button is not disabling.
Appreciate your responses.
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
function TrimThatNameThenSubmit() {
var tableName = $('#tableName').val().replace(/^\s+|\s+$/g, "");
$('#tableName').val(tableName);
**$('#Submit').attr('disabled', 'disabled');**
$('form:eq(0)').submit();
}
</script>
<%
var messages = ViewData["messages"];
%>
<% using (Html.BeginForm()) { %>
<div>
<div class="Spacer"></div>
<div class="RevertCaseStateHeader" align="center">
<%= Html.TextBox("tableName", "Enter tableName to Backout Claim", new { #style = "width: 400px;" })%>
<input type="button" value="Submit" onclick="javascript:TrimThatNameThenSubmit()"/>
</div>
<div class="RevertCaseStateSummary" align="center">
<% if (messages != null)
{ %>
<%= Html.Encode(messages)%>
<% } %>
</div>
</div>
<% } %>
</asp:Content>

Your jQuery is selecting the button with id=Submit which doesn't exist, change your button definition to:
<input id="Submit" type="button" value="Submit" onclick="javascript:TrimThatNameThenSubmit()"/>

Related

Deleting record using MVC Delete View

What I am trying to do is I am Listing all the record and then provide option to delete the record. When User clicks on Delete Link on Index page he is redirected to Delete Confirmation Page( Delete View created by MVC framework), now what I was expecting was when I click on Submit button on the Delete View it will come to my Delete Action of Controller with the object that needs to be deleted. But the problem is I am getting a object but all the properties are set to null.
Below is the code:
//GET
public ActionResult DeleteUser (long id )
{
return View(_repository.GetUserById(id));
}
//POST
[HttpPost]
public ActionResult DeleteUser (UserDTO user)
{
_repository.DeleteUser(user.UserId);
/
return RedirectToAction("Index");
}
I was expecting that one submit is clicked then Second (HttpPost) method will be called and user will be filled with the values, but that is not happening..
can anyone tell me what wrong am I doing ???
This is my Delete View Code
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RepositoryPatternSample.DTOs.UserDTO>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
DeleteUser
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>DeleteUser</h2>
<h3>Are you sure you want to delete this?</h3>
<fieldset>
<legend>UserDTO</legend>
<div class="display-label">UserId</div>
<div class="display-field"><%: Model.UserId %></div>
<div class="display-label">Username</div>
<div class="display-field"><%: Model.Username %></div>
<div class="display-label">FirstName</div>
<div class="display-field"><%: Model.FirstName %></div>
<div class="display-label">LastName</div>
<div class="display-field"><%: Model.LastName %></div>
</fieldset>
<% using (Html.BeginForm()) { %>
<p>
<input type="submit" value="Delete User" /> |
<%: Html.ActionLink("Back to List", "Index") %>
</p>
<% } %>
</asp:Content>
Your properties are out of the form post. That's why you see the model null.
Personally instead of passing all the model properties I would pass only the id.
Something like that
<% using (Html.BeginForm()) { %>
<p>
<%: Html.HiddenFor(model=> model.UserId) %>
<input type="submit" value="Delete User" /> |
<%: Html.ActionLink("Back to List", "Index") %>
</p>
<% } %>
and your controller would be
[HttpPost]
public ActionResult DeleteUser (int userId)
{
_repository.DeleteUser(userId);
return RedirectToAction("Index");
}

I am using asp.net MVC 1.0 and want to apply some jquery or javascript in below code?

<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ens.ContactPerson>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Edit
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Edit</h2>
<%if (System.Web.HttpContext.Current.User.Identity.IsAuthenticated)
{ %>
<%= Html.ValidationSummary("Edit was unsuccessful . Please correct the errors and try again.")%>
<% using (Html.BeginForm())
{%>
<fieldset>
<legend>Fields</legend>
<p>
<%= Html.Hidden("Id", Model.Id)%>
<%= Html.ValidationMessage("Id", "*")%>
</p>
<p>
<label for="FirstName">FirstName:</label>
<%= Html.TextBox("FirstName", Model.FirstName)%>
<%= Html.ValidationMessage("FirstName", "*")%>
</p>
<p>
<label for="MiddleName">MiddleName:</label>
<%= Html.TextBox("MiddleName", Model.MiddleName)%>
<%= Html.ValidationMessage("MiddleName", "*")%>
</p>
<p>
<label for="LastName">LastName:</label>
<%= Html.TextBox("LastName", Model.LastName)%>
<%= Html.ValidationMessage("LastName", "*")%>
</p>
<p>
<label for="DateOfBirth">DateOfBirth:</label>
<%= Html.TextBox("DateOfBirth", String.Format("{0:g}", Model.DateOfBirth))%>
<%= Html.ValidationMessage("DateOfBirth", "*")%>
</p>
<p>
<label for="ContactPersonType">ContactPersonType:</label>
<%= Html.DropDownList("ContactPersonType")%>
<%= Html.ValidationMessage("ContactPersonType", "*")%>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "All")%>
</div>
<%} %>
</asp:Content>
can i apply some javascript or jquery here such that after click on submit button, it must checks for the values are valid , if can do so.
pls give code for the validation of last name field...this should not be empty.
i tried with this function but it dindt work....
protected void ValidateContact(ens.ContactPerson contactToValidate)
{
if (contactToValidate.FirstName.Trim().Length == 0)
ModelState.AddModelError("FirstName", "First name is required.");
if (contactToValidate.LastName.Trim().Length == 0)
ModelState.AddModelError("LastName", "Last name is required.");
if (contactToValidate.MiddleName.Trim().Length == 0)
ModelState.AddModelError("MiddleName", "Invalid phone number.");
if (contactToValidate.DateOfBirth.ToString().Trim().Length == 0)
ModelState.AddModelError("Email", "Invalid email address.");
}
Probably, You can force validate entire form with Sys.Mvc.FormContext.getValidationForForm. Example: http://weblogs.asp.net/imranbaloch/archive/2010/07/11/asp-net-mvc-client-side-validation-with-dynamic-contents.aspx
You will need some JavaScript references. Follow this http://www.gregshackles.com/2010/02/validating-hidden-fields-in-asp-net-mvc-2/
After that, you can just call any javascript method on submit button, do javascript validation and then submit the form.
<script type="text/javascript" language="javascript">
function ValidateLastName(name) {
//all validation here
var form = document.forms[0];
form.action = '/AddressType/Create';
form.submit();
}
</script>
OR may be one of these may help,
http://forums.asp.net/t/1538157.aspx/1
My Own javascript validation + MicrosoftMvcValidation . Is it possible ? How
You are going to want to make the submit button a regular button and onclick call a javascript function that validates your fields. If the validation passes you can submit the form with $("#myForm").submit(). You can do something like var lastName = $("#LastName").val() to get the value in your last name textbox and then test the value in lastName.

Session time outs redirects within the panel in mvc 2

i am working in the sample mvc 2 application. in that i am handled the session timeout in the web.config the following code is this.
<authentication mode="Forms">
<forms loginUrl="~/Account/LogOn" cookieless="UseCookies" name="FormAuthentication" timeout="1"/>
</authentication>
this is code is working fine for the screens when i kept the screens in the idle....
but my issue is in one particular screen i having eight tabs in one panel if the session login page is redirected,after the idle stage, if i click link button in the tab it is redirected login page inside the tab panel not redirected to the login page.all the tabs are been done with usercontrols see for reference....
You need to have the login page break out of any framesets, so in the head of the login page add the following JavaScript:
<script type="text/javascript">
if (parent.frames.length > 0) {
top.location.href = document.location.href;
}
</script>
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="LogOn.Master.cs" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="../../App_Themes/PropelSkin/Stylesheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/thickbox-min.js"></script>
<link rel="Stylesheet" href="../../Css/Thickbox.css" type="text/css" />
<script type="text/javascript">
if (parent.frames.length > 0) {
top.location.replace(document.location);
}
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
<script src="../../Scripts/ajaxfileupload.js" type="text/javascript"></script>
<div class="content-admin">
<%
EmployeeDetails employeeDetails = null;
if (ViewData["EmployeeDetails"] != null)
employeeDetails = (EmployeeDetails)ViewData["EmployeeDetails"];
EmployeePersonalDetails personalDetails = null;
if (ViewData["PersonalDetails"] != null)
personalDetails = (EmployeePersonalDetails)ViewData["PersonalDetails"];
string entityName = new EmployeeDetails().EntityIdentifier;
if (employeeDetails != null)
{ %>
<div class="page-header">
<h1>
<%=employeeDetails.FirstName%>'s Profile
</h1>
<%-- column.ForColumn(col => Replace().SetFieldIdentifierAndPermissions("", PrivilegeConstant.DeleteEmployee).Named("Deactivate").DoNotEncode().Attributes(x => new Hash(#style => "font-weight:normal"));--%>
<table class="form-search" cellpadding="0" cellspacing="0">
<tr>
<td class="gridbg">
</td>
<td class="searchbg">
<table>
<tr>
<%
if (!string.IsNullOrEmpty(employeeDetails.UserId))
{
if (UserIdentity.HasPrivilege(CelloSaaS.ServiceContracts.AccessControlManagement.PrivilegeConstants.AddUserRole) &&
UserIdentity.HasPrivilege(CelloSaaS.ServiceContracts.AccessControlManagement.PrivilegeConstants.DeleteUserRole)
)
{
%>
<td>
<a class="thickbox" href="AddRoleSettings?width=375&height=245&userId=<%=employeeDetails.UserId %>&employeeId=<%=employeeDetails.Identifier %>"
title="Assign Roles" alt="Assign Roles">
<img src="../../App_Themes/PropelSkin/btn-assignroles.png" alt="Assign Roles" /></a>
</td>
<%}
} %>
<td>
<%--<div class="imageAlign">--%>
<a href="../History/History?entityName=<% =entityName %>&entityReferenceId=<%=employeeDetails.Identifier %>"
title="View History" alt="View History">
<img src="../../App_Themes/PropelSkin/btn-viewhistory.png" alt="View History" /></a>
<%--</div>--%>
</td>
<% if (UserIdentity.HasPrivilege(PrivilegeConstant.DeleteEmployee))
{ %>
<td>
<a href="DeleteEmployeeDetails?employeeId=<%=employeeDetails.Identifier %>" title="Deactivate Employee"
alt="Deactivate Employee">
<img id="deactivateemp" src="../../App_Themes/PropelSkin/btn-deactivate.png" alt="Deactivate Employee" /></a>
</td>
<%} %>
<% if (UserIdentity.HasPrivilege(PrivilegeConstant.ViewEmployee))
{ %>
<td>
<a href="EmployeeList">
<img src="<%= this.ResolveClientUrl("../../App_Themes/PropelSkin/btn-back.png")%>"
alt="Back To Employee List" /></a>
</td>
<%} %>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="profile-content-cntr">
<div class="profile-content-left">
<div class="profile-header">
<h1>
Summary</h1>
</div>
</div>
<div class="profile-content-right">
<div class="tabs">
<ul class="tabNavigation">
<li><span>Organization</span></li>
<li><span>Personal</span></li>
<li><span>Education</span></li>
<li><span>Experience</span></li>
<li><a href="#EmployeeCoOrganizationDetails" title="CoOrganizationDetails"><span>Co-Organization</span>
</a></li>
<li><span>Skills</span></li>
<li><span>Documents</span></li>
<%-- <li>Skills</li>
<li>Projects</li>--%>
<%-- <li>Leaves</li>--%>
<%--<li>Payroll</li>--%>
</ul>
<a href="#" title="Next" class="imageNaviation">
<img src="../../App_Themes/PropelSkin/arrow-right.png" alt="Next" />
</a><a href="#" title="Previous" class="imageNaviation">
<img src="../../App_Themes/PropelSkin/arrow-left.png" alt="Previous" /></a>
</div>
</div>
</div>
<div class="form-content">
<div class="content-left">
<div id="EmployeeBasicDetails" class="profile-view">
<% Html.RenderPartial("ManageEmployeeBasicDetails"); %>
</div>
</div>
<div class="content-right">
<div class="right-panel">
<div class="profile-tabs">
<div class="tabs">
<div id="EmployeeDetails">
<% Html.RenderPartial("ManageEmployeeDetails"); %>
</div>
<div id="ManagePersonalDetails">
<% Html.RenderPartial("ManagePersonalDetails"); %></div>
<div id="EmployeeEducationDetails">
<% Html.RenderPartial("ManageEducationDetails"); %></div>
<div id="EmployeeEmploymentHistory">
<% Html.RenderPartial("ManageEmploymentHistory"); %></div>
<div id="EmployeeCoOrganizationDetails">
<% Html.RenderPartial("ManageCoOrganizationDetails"); %></div>
<div id="EmployeeSkillSet">
<% Html.RenderPartial("ManageEmployeeSkillSet"); %>
</div>
<div id="EmployeeDocuments">
<% Html.RenderPartial("ManageEmployeeDocuments"); %>
</div>
<%--<div id="Skills">
<% Html.RenderPartial("Skills"); %>
</div>
<div id="Skills">
<% Html.RenderPartial("Skills"); %>
</div>
<div id="Skills">
<% Html.RenderPartial("Skills"); %>
</div>--%>
<%-- </div>--%>
</div>
</div>
</div>
<%}
else
{ %>
<div>
<div class="profile-view">
<div class="profile-det">
<div class="notification-bg">
<div id="msg-failure">
<div class="header">
<img src="../../App_Themes/PropelSkin/fail-top1.gif" alt="" class="left" />
<img src="../../App_Themes/PropelSkin/fail-top2.gif" alt="" class="right" />
</div>
<div class="content">
<%=Html.CelloValidationMessage("EmployeeProfileMessage", new { #class = "exception" })%>
</div>
<div class="footer">
<img src="../../App_Themes/PropelSkin/fail-btm1.gif" alt="" class="left" />
<img src="../../App_Themes/PropelSkin/fail-btm2.gif" alt="" class="right" />
</div>
</div>
</div>
</div>
</div>
<%} %>
</div>
</div>
</div>
</div>

Error while loading Partial View based on the Tab selected on ASP.NET MVC page

I am new to MVC and trying to load a partial view based on the tab selected.
Here are the two tabs (Prodcuts and Doc Types) and
Two partial views (NavMenuProduct.ascx and NavMenuDocType.ascx).
The default page is: Index.aspx
My code is not loading the Partial view.
I would appreciate if someone has any code sample for this.
Here is the Javascript:
<script type="text/javascript">
$(function () {
var $tabs = $("#tabs").tabs({
select: function (e, ui) {
hdnTabSelected.value = ui.index;
alert(hdnTabSelected.value);
}
});
});
</script>
Html Code:
<table class="tableNoBorder" width="100%">
<!--Header Dashboard-->
<tr>
<td colspan="2">
<div id="container">
<h1>DocShare</h1>
<div id="welcome">Welcome, <%=new CacheUser().GetLoginUser().CommanName%></div>
</div>
</td>
</tr>
<!--Tabs Section for Products and DocType-->
<tr>
<td colspan=2>
<DIV id=tabs>
<UL>
<LI><A href="#" >Products</A></LI>
<LI>Doc Type</LI>
</DIV>
</td>
</tr>
<!--Left Menu Navigation and Main Content-->
<tr>
<td valign="top" width="200px">
<div >
<input type="hidden" id = "hdnTabSelected" runat="Server" />
<%-- If TabSelected = 0, load Product Menu, otherwise Load DocType Menu--%>
<%if (hdnTabSelected.Value == "0") %>
<% Html.RenderAction("NavMenuProduct","Home"); %>
<% else %>
<% Html.RenderAction("NavMenuDocType","Home"); %>
</div>
</td>
<td valign="top" width ="100%" >
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</td>
</tr>
</table>
What you look to be doing is a standard master page ... I would open up a file new MVC and look at how it does that with the home and about tabs ...
Master :
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
about
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
About Us
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>About</h2>
<p>
Put content here.
</p>
</asp:Content>
Remove the runat="server" from the above hidden input. The problem is that the rendered html and the javascript are not matching.
This should work the first time the page loads, however the rendered id for the hidden input will look like ctl00$MainContent$hdnTabSelected which does not match hdnTabSelected.value in the javascript.
You could change the javascript to this, but I recommend against it
<script type="text/javascript">
$(function () {
var $tabs = $("#tabs").tabs({
select: function (e, ui) {
<%=hdnTabSelected.ClientID %>.value = ui.index;
alert(<%=hdnTabSelected.ClientID %>.value);
}
});
});
</script>
It isn't obvious what is wrong according to you question, but at the first glance I think you should replace your calls to Html.RenderAction to calls to Html.Action.
The difference between the two is that
Html.RenderAction will render the
result directly to the Response (which
is more efficient if the action
returns a large amount of HTML)
whereas Html.Action returns a string
with the result.
Haaked has a blog-post with more details.

ASP.NET MVC and tinyMCE

I'm getting some very strange behaviour with tinyMCE in an ASP.NET MVC 2 beta app (same happend with MVC 1). I have a view called "edit.aspx" that is called when the user tries to create or edit an entity. The view uses jquery to load tinyMCE where ever it finds textarea's.
Here are my 2 action methods that both call the same "edit.aspx" view
public ActionResult Create()
{
return View("Edit", new FutureEvent());
}
[HttpGet]
public ActionResult Edit(int id)
{
FutureEvent futureEvent = (from fe in adminGalleryRepository.FutureEvents
where fe.ID == id
select fe).FirstOrDefault();
return View("Edit", futureEvent);
}
The "Edit.aspx" view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Admin.Master" Inherits="System.Web.Mvc.ViewPage<DomainModel.Entities.FutureEvent>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Future event
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$('textarea').tinymce({
script_url: '../../Scripts/tiny_mce/tiny_mce.js',
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
});
});
</script>
<h2>Future event</h2>
<%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm("Edit", "FutureEvents")) {%>
<div id="tabs">
<ul>
<li>Future event</li>
</ul>
<div id="tabs-1">
<%= Html.Hidden("ID") %>
<label class="formLabel" for="Title">Title:
<%= Html.ValidationMessage("Title", "*") %>
<%= Html.TextBox("Title", Model.Title, new { size = "40px" })%>
</label>
<label class="formLabel" for="Info">Info:
<br />
<%= Html.TextArea("Info", Model.Info, 15, 130, null) %>
</label>
<br />
<label class="formLabel" for="WebSite">Web site address:
<%= Html.TextBox("WebSite", Model.WebSite, new { size = "40px" })%>
</label>
</div>
</div>
<div class="clear" ></div>
<div id="footer" style="text-align: left">
<input type="submit" value="Save" />
<%=Html.ActionLink("Back to List", "List") %>
</div>
<% } %>
</asp:Content>
The strange thing is that the create method renders the "edit" view and the tinyMCE edit appears correctly. But when the edit action method renders the "edit" view, the view appears as you would expect - but without the tinyMCE editor.
No errors appear in FireBug, I get exactly the same behaviour in IE.
I also tried removing the $("#tabs").tabs() line but it made no difference.
It could be related to this line:
script_url: '../../Scripts/tiny_mce/tiny_mce.js',
Since the problem is in the Edit view, maybe the extra parameter adds one level to the folder structure.
Why don't you try:
script_url: '/Scripts/tiny_mce/tiny_mce.js',

Resources