ASP.NET Razor: Form (in a dialog) not submitting - asp.net

I'm trying to get an (AJAX (for now without AJAX)) form to submit in a jquery dialogue. But for some reason the tags never get rendered.
Included scripts:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery-ui-1.8.19.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.19.custom.min.js")" type="text/javascript"></script
>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMVCAjax.js")" type="text/javascript"></script>
<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/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script src="#Url.Content("~/ckeditor/adapters/jquery.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.inputfocus-0.9.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/progress.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/multiform.js")" type="text/javascript"></script>
<div id="hidden" style="display:none;">
<div id="coinDialogue" title="New Coin">
#using(Html.BeginForm("CreateCoin", "Home"))
{
#Html.ValidationSummary(true)
<div style="display: inline;">
<label for="FaceValue">
Coin value</label>
<input type="text" name="FaceValue" id="FaceValue" value="" style="width: 35px;" />
<select id="currency_type" name="currency_type">
<option value="USD" selected="selected">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<br />
<label for="ReusePeriod">
Usage:</label>
<select id="ReusePeriod" name="ReusePeriod">
<!-- Loop with for and values from Model (gotten from Paycento API) -->
<option value="o" selected="selected">Once</option>
<option value="w" >Weekly</option>
</select>
<br />
<label for="ValidFrom">
Validate from</label>
<br />
<input type="text" id="ValidFrom" name="ValidFrom" value="" />
<br />
<label for="ValidUntil">
Validate To</label>
<input type="text" id="ValidUntil" name="ValidUntil" value="" />
<br />
<input type="submit" value="Create new coin" />
}
</div>
<script type="text/javascript">
$('#coinDiaLink').click(function () {
$('#coinDialogue').dialog({
buttons: {
Cancel: function () {
$(this).dialog('close');
},
Create: function () {
$('#createCoinForm').trigger('submit');
}
}
});
});
</script>
</div>

Can you please replace Ajax.Beginform with Html.BeginForm & see whether it posts the entire page, if it does then one of the problem could be -- Ajax.Beginforms requires some scripts files to be included in either view or masterview, see if those are missing
jquery.unobtrusive-ajax.min.js
MicrosoftAjax.js
MicrosoftMvcAjax.js

Related

Bootstrap Datetimepicker not working with Master Pages

I am using bootstrap to make my form. I am unable to use bootstrap datetimepicker in my project. Can master page be a problem?
Please help me out here.
Jquery and Sheets:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$("#dp").click(function () {
$('#datetimepicker1').datetimepicker();
})
})
});
</script>
ASPX Code:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span id="dp" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
use var date_input = $('#<%=date.ClientID%>'); and set clientmodeid to static.

How to get date picker using bootstrap?

I want date picker. I don't want time. I am getting an error message like
my html coding is;
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' class="form-control" placeholder="Issue Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
script code
<link rel="stylesheet" href="css\bootstrap.css">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="css\font-awesome.min.css">
<link rel="stylesheet" href="css\bootstrap-social.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="js\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
I cannot get that calandar when i click that textbox or calander addon.
thanks
You can't use .datepicker() it must be .datetimepicker().If you don't want the time just set the format parameter:
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
});
</script>
Article for reference - Bootstrap datetimepicker options
You need to do small change. Remove div's id and place that id in input tag with type="text" as shown below
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" >
<input type='text' class="form-control" placeholder="Issue Date" id="datetimepicker1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Then add below script using same id
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
Use the below code:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link href="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/css/datepicker.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker(
{viewMode: 'month',
format: 'dd-mm-yyyy'
});
});
</script>
</head>
<body>
<div class="input-append date" id="datepicker" data-date="02-2012">
<input type="text" readonly="readonly" name="date" >
<span class="add-on"><i class="icon-th"></i></span>
</div>
</body>
</html>
Change the date format as you wish by changing the format parameter.
Check out this http://jsfiddle.net/Kz2sW/

angular js routing trouble

I am unable to get my code working. I am a newbiew on JS and trying to implement some example I found online on routing on angularJs. I have spent many hours trying to fix it, but could not.
Issue : Default View(View2) is opened by $routeProvider configuration. However, when I redirect this to view2.htm to view1.htm but blank page opens up.
Please help !
HTML CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" />
<link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap.css" />
<link href="JS/bootstrap/css/bootstrap.css.map" />
<link href="JS/bootstrap/css/bootstrap.min.css" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" />
</head>
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>
<script src="JS/angular.js" language="javascript" type="text/javascript"></script>
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script>
<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">
</script>
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">
</script>
<body>
<title>::DEMO APP:: </title>
<div data-ng-app="demoApp1">
<script src="DemoJS.js" language="text/javascript" type="text/javascript"></script>
<div class="container">
<h3>
All the examples AngularJS Here:</h3>
</div>
<div class="container-fluid" data-ng-view="">
</div>
</div>
</body>
</html>
View1.htm Markup
<div id="View1" >
<h2>
Example 4 & 5
</h2>
<div class="container">
Name <input type="text" data-ng-model="inputData.name" placeholder="Name" />
<br />
City <input type="text" data-ng-model="inputData.city" placeholder="City" />
<br />
<button class="btn btn-primary" data-ng-click="addCustomer()">
Add Customer</button>
<br />
Filter <input type="text" data-ng-model="nameText" placeholder="Filters" />
<br />
<ul>
<li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}}
- {{customer.city}} </li>
</ul>
<a ng-href="#/View2.htm">View2</a>
</div>
</div>
View2.htm Markup
<div id="View2">
<h2>
Example 1,2 and 3</h2>
<div class="container">
<h3>
Data Binding Fundamentals</h3>
<h4>
Using a Data Binding Template</h4>
Name:
<input type="text" data-ng-model="name" placeholder="Type something" />
{{ name }}
</div>
<h1>
Example 2</h1>
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']">
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<h1>
Example 3</h1>
<div>
<h3>
Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="name in names">{{name}} </li>
</ul>
</div>
<a ng-href="#/View1.htm">View1</a>
</div>
DemoJS.js file code
var demoApp1 = angular.module('demoApp1', ['ngRoute'])
demoApp1.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController1',
templateUrl: '/View2.htm'
})
.when('View1',
{
controller: 'SimpleController',
templateUrl: '/View1.htm'
});
});
demoApp1.controller('SimpleController1', function ($scope) {
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
});
demoApp1.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Sunil', city: 'Delhi' },
{ name: 'Ritu', city: 'Shbad' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
});
I have found my mistake. The href link I used was not correct. As href is managed by angular itself, we should not add ".html" and the string we mention here should match to $routeProvide config string.. Below is the Modification I Made:
Incorrect on View1.html
<a ng-href="#/View2.htm">View2</a>
Corrected on View1.html:
View2
Samething I did on View2.html.

ASP.NET 4.0 Deployment Issue CSS / Javascript

I have created a small ASP .Net 4.5 application for a client which I have deployed to their server.
When the application is deployed to the client server, the css is not applied to the screens and javascript is not working either.
The clients server is a Windows Server 2008 R2 server and IIS is version 7.
Any help or advice would be greatly appreciated.
Code is listed below:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>
Log in
</title><script src="/UmcDashboard/bundles/modernizr?v=jmdBhqkI3eMaPZJduAyIYBj7MpXrGd2ZqmHAOSNeYcg1"></script>
<link href="/UmcDashboard/Content/css?v=R7tMRBB8EvG-sAq1G9GPLSOfNpsUdVt2BDKTXrBboUg1" rel="stylesheet"/>
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" /><meta name="viewport" content="width=device-width" /></head>
<body>
<form method="post" action="Login.aspx?ReturnUrl=%2fUmcDashboard" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="ctl08_HiddenField" id="ctl08_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="X/PrXVBXRj648w7TC6ht7amXKGcYUTtuIRfHi+jJnqCNeHPB+RC+5MN7lXWQsYvAGHnZc4GFo0gJgJf6O5F57FPnkx856OjmgrVge+SVcrKAM9Ss1mUmJBTGZf4GeyBIwSpsgcoxntEJDl5+C8h/S69Uz1h3UIRdkJtn0Ut8FEkhxJ09ZksX9a0M/5c/ESCewFwe/BPzeckstskezULt1ME7NYD4uF3OweYsuyuOMTL7qJt/XPz6dTEMETwIhAsMxMkA7y62w6uztsj+v6c03q9ICI7a2ViQ1d3/f/RIMQcyI1X/MpRlpwVP6cdjtCwT" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/UmcDashboard/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZC0itZSQ0gdC6rM1cTDLkhXQkqBs8vcEUYGxjW3G_UlqGyzCShtM_WOfFbVmSDqIwA2&t=634773866700000000" type="text/javascript"></script>
<script src="/UmcDashboard/ScriptResource.axd?d=nv7asgRUU0tRmHNR2D6t1E097zp5q6ASuVO_NvVVES9ARDjdENBrgQSxWwB3uWl4y3kAg1I3muUX35kS0cxi4of4O1yiJ7p9Eb8ue-b_QWQehLHDV-vkZXVEefEhHB_HMuiuC5VZuEied1NgnR23DA2&t=ffffffffdf4c7f25" type="text/javascript"></script>
<script src="/UmcDashboard/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1Le6JxhuIS2MLNuH3Qlo-s18bUt5DAKao4jMh-P6xYQ6CpcmSKTOw7RDwOdZbolz4CAMqtE6lYH4RL_lyIg_qfBT3kZhHV1dmqwfOIJ_HveLg0&t=7a2ecbb7" type="text/javascript"></script>
<script src="/UmcDashboard/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScLO_IGK9f9WiZHHvmSCixGXPkFBZYW9OV3bZYPv8ydKcRpuDkSp2SW3USQ1oCeje17QEcAp6MIqmzxfUxr_NmJZiXcuGo1Wg0axAk3moOAUa0&t=7a2ecbb7" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="/UmcDashboard/bundles/WebFormsJs?v=q9E9g87bUDaS624mcBuZsBaM8xn2E5zd-f4FCdIk2cA1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="v59u+dgHdVImvalqQpn+eUQMJmO43qxrPx50v0ifATzQdHQVd1J+bf71jTw+7sc3igXvXHKDyzt/1swIEszxECv9zb0mkG6/JdKwv8Dj69GtJ4F3v0HW73YLF6uZ0v440Xw5IEAYzgNpD7icMSrYRXITx9xsphq5KlhKtumarKRTMRZp/34mwXiKmDNq+xDR" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
UMC - Intake Arrivals
</p>
</div>
<div class="float-right">
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<hgroup class="title">
<h1>Log in.</h1>
</hgroup>
<section id="loginForm">
<p class="validation-summary-errors">
</p>
<fieldset>
<legend>Log in Form</legend>
<ol>
<li>
<label for="MainContent_LogInControl_UserName">User name</label>
<input name="ctl00$MainContent$LogInControl$UserName" type="text" id="MainContent_LogInControl_UserName" />
<span data-val-controltovalidate="MainContent_LogInControl_UserName" data-val-errormessage="The user name field is required." id="MainContent_LogInControl_ctl02" class="field-validation-error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">The user name field is required.</span>
</li>
<li>
<label for="MainContent_LogInControl_Password">Password</label>
<input name="ctl00$MainContent$LogInControl$Password" type="password" id="MainContent_LogInControl_Password" />
<span data-val-controltovalidate="MainContent_LogInControl_Password" data-val-errormessage="The password field is required." id="MainContent_LogInControl_ctl04" class="field-validation-error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">The password field is required.</span>
</li>
<li>
<input id="MainContent_LogInControl_RememberMe" type="checkbox" name="ctl00$MainContent$LogInControl$RememberMe" />
<label for="MainContent_LogInControl_RememberMe" class="checkbox">Remember me?</label>
</li>
</ol>
<input type="submit" name="ctl00$MainContent$LogInControl$ctl06" value="Log in" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$LogInControl$ctl06", "", true, "", "", false, false))" />
</fieldset>
</section>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - Created by MCS</p>
</div>
</div>
</footer>
<script type="text/javascript">
//<![CDATA[
(function() {var fn = function() {$get("ctl08_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]>
</script>
</form>
</body>
</html>
Please check the console and resolve the error. I think you have hardcode the CSS and JS Path
It is always good to place the CSS/JS files in a publicly accessible folder. In my case, FormsAuthentication restricted access to such resources.
Change your web.config to make your resource files : CSS , JS publicly accessible. for example::
<location path="~/Resources/Css">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
One more solution is to check the account used by Anonymous Access. If it is using the IUSR account not the IIS_IUSRS account, add IUSR to the website folder.

ASP.NET MVC form submitted in FF/Chrome, not in IE

I'm going slightly insane here. I've been trying to figure out what is the problem for the past 24 hours, but I simply can't figure out what is wrong.
I have an article submission framework. First the user inputs some article text fields, then he uploads 2 pictures, then he crops them. The problem occurs when I try to crop the images - the submit button simply doesn't work. I click it and nothing happens.
However this only happens in IE.
In FF and Chrome it works flawlessly.
This is the aspx code of the CropImages view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Admin/Site.Admin.Master" Inherits="System.Web.Mvc.ViewPage<dr_teman_MVC.Models.ImagesUploadModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image1.originalImageAddress)%>" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image2.originalImageAddress)%>" alt="cropImage2" id="crop_target2" "/>
</div>
<% using (Html.BeginForm("ArticleCreated", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "<%= Html.Encode((Model.newArticle.ArticleID).ToString()) %>"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
<%} %>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="htmlHead" runat="server">
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server"></asp:Content>
do you need the code of any other part? (the relevant models? the controller?)
The aspx page is displayed, with the pictures. The cropping mechanism works - I can select the crop region in both images. But in IE, when I click on submit, nothing happens. I added a breakpoint to the relevant controller (Admin/ArticleCreated), but it doesn't even get there (the code does reach the controller which calls this aspx view, and passes all the information as expected).
So, does anyone know why IE is causing me such problems?
Any suggestion would be welcome, I am really stumped here...
Thank you,
Tom
This is the HTML source as shown in IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Dr. Joseph Teman - Discover The Beautiful You
</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Framework CSS -->
<link id="ctl00_Link1" rel="stylesheet" href="../Content/blueprint/screen.css" type="text/css" media="screen, projection" /><link id="ctl00_Link2" rel="stylesheet" href="../Content/blueprint/print.css" type="text/css" media="print" />
<!-- Site Specific CSS -->
<link id="ctl00_Link3" href="../Content/theme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 6]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie6.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie7.css" type="text/css" media="screen, projection" /><![endif]-->
<!-- Import buttons plugin -->
<link id="ctl00_Link4" rel="stylesheet" href="../Content/blueprint/plugins/buttons/screen.css" type="text/css" media="screen, projection" />
<!-- Import link-icons plugin -->
<link id="ctl00_Link5" rel="stylesheet" href="../Content/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection" />
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery.imgareaselect-0.9.2/css/imgareaselect-animated.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</head>
<body id="ctl00_Body2">
<div class="contentbg">
<div class="headerbg">
<div class="container mainwrap">
<div class="header">
<div class="copyright">
<p>Copyright information here</p>
</div><!--/copyright-->
<div class="sitename">
<h1>Dr. Joseph Teman</h1>
<h3>Discover The Beautiful You</h3>
</div>
<ul class="nav">
<li class="about">ראשי</li>
<li class="about">הוסף מאמר חדש</li>
<li class="about">ערוך מאמר קיים</li>
</ul><!--/nav-->
</div><!--/header-->
<div>
</div>
<div>
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="/images/articleImages/146/1.jpg" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="/images/articleImages/146/2.jpg" alt="cropImage2" id="crop_target2" "/>
</div>
<form action="/Admin/ArticleCreated" enctype="multipart/form-data" method="post">
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "146"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
</form>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</div>
<!--footer-->
<div class="footer">
<ul class="nav">
<li>ראשי</li>
<li>אודות</li>
<li>התחבר</li>
<li class="last">מאמרים</li>
</ul>
<p align="left">Copyright © Dr. Joseph Teman 2010</p>
</div><!--/footer-->
</div><!--/container mainwrap-->
</div><!--/headerbg-->
</div><!--/contentbg-->
</body>
</html>

Resources