Render partial with Ajax.ActionLink - c#

I have the following code in the view:
#model IEnumerable<soundyladder.Service.Models.Profile>
#{
ViewBag.Title = "Profile Login";
Layout = "/Views/Shared/_Layout2.cshtml";
}
<style>
#tableTest tr:hover {
cursor: pointer;
}
</style>
<div class="centering col-lg-6 logged_in_mainboxes">
<h3>Profiles</h3>
<table class="table table-striped" id="tableTest" style="margin-top: 15px;">
#foreach (var m in Model)
{
<tr>
<td>#Ajax.ActionLink(m.Name, "Edit", "ProfileLogin", null, new AjaxOptions()
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result", // <-- DOM element ID to update
// <-- Replace the content of DOM element
// <-- HTTP method(Post/Get)
})</td>
</tr>
}
</table>
<div id="result">
</div>
</div>
Here is my controller:
public ActionResult Edit()
{
return PartialView("_EditProfile");
}
Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/select2.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/select2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="centering col-lg-6" style="padding: 0;">
#Html.ActionLink("", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
</div>
</div>
<div class="body-content" style="margin-top: 40px;">
<div class="container-fluid">
<div class="row-fluid">
#RenderBody()
<div class="centering col-lg-6 footer" style="text-align: center; margin-bottom: 25px;">
<ul>
<li>About us</li>
<li>Blog</li>
<li>Help</li>
<li>Privacy</li>
<li>Cookies</li>
</ul>
<div style="float: right; margin-bottom: 25px; margin-right: -15px;">
<img src="https://sdltridionworld.com/images/AppStore-Icon_tcm89-19881.png" width="100" height="35" />
<img src="https://portal.xsede.org/dashboard-portlet/images/playstore.png" width="90" height="35" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem I have Is that when I hit the link, I am redirected to a new page, localhost:65148/ProfileLogin/Edit. I want the partial view to appear in the divbox, result. What am I doing wrong?

Related

C# HTMLAgilityPack Need help creating xpath

<html lang="en" class="gr__r6db_com">
<head>
<meta charset="UTF-8">
<title>Search results for kinglio | R6DB</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff0000">
<meta id="meta_desc" name="description" content="Search players named kinglio on R6DB">
<meta name="keywords" content="r6db,gitgudscrub,rainbow 6, rainbow six siege, database">
<meta name="apple-mobile-web-app-title" content="R6DB">
<meta name="application-name" content="R6DB">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
</head>
<body data-gr-c-s-loaded="true">
<div id="mount">
<div class="app is-results">
<div class="app-background">
<img src="/assets/nippon.jpg" class="clear">
<img src="/assets/nippon-blurred.jpg" class="blur">
</div>
<div class="app-page">
<div class="search">
<h1 class="title is-1 search-title">R6DB</h1>
<div class="search-form">
<div class="column is-small-8 search-input">
<input type="text"><span><input type="checkbox" id="exactSearch"><label for="exactSearch">exact name</label></span>
</div>
<button class="search-submit">Search</button>
</div>
<div class="colums is-multiline search-results">
<div class="playercard player-6881796a-9f51-4386-83f9-136ea45d0faa is-user is-visible">
<a href="/player/6881796a-9f51-4386-83f9-136ea45d0faa" class="card-image">
<img src="/assets/noavatar.png">
</a>
<div class="card-content">
<div class="player-identification">Kinglio<span class="player-id">6881796a-9f51-4386-83f9-136ea45d0faa</span>
</div>
<div class="player-aliases">
<header>known aliases</header>
<ul>
<li>Kinglio</li>
</ul>
</div>› view on uplay
</div>
</div>
<div class="playercard player-344b8c89-7deb-4e0f-ad42-942ee314c072 is-user is-visible">
<a href="/player/344b8c89-7deb-4e0f-ad42-942ee314c072" class="card-image">
<img src="//uplay-avatars.s3.amazonaws.com/344b8c89-7deb-4e0f-ad42-942ee314c072/default_146_146.png">
</a>
<div class="card-content">
<div class="player-identification">KingLio.-<span class="player-id">344b8c89-7deb-4e0f-ad42-942ee314c072</span>
</div>
<div class="player-aliases">
<header>known aliases</header>
<ul>
<li>KingLio.-</li>
<li>KingLio.TG</li>
<li>and 7more</li>
</ul>
</div>› view on uplay
</div>
</div>
<div class="playercard player-922eec9c-61b6-4a09-892e-96ae2be3218d is-user is-visible">
<a href="/player/922eec9c-61b6-4a09-892e-96ae2be3218d" class="card-image">
<img src="//uplay-avatars.s3.amazonaws.com/922eec9c-61b6-4a09-892e-96ae2be3218d/default_146_146.png">
</a>
<div class="card-content">
<div class="player-identification">PS4Gamer.--<span class="player-id">922eec9c-61b6-4a09-892e-96ae2be3218d</span>
</div>
<div class="player-aliases">
<header>known aliases</header>
<ul>
<li>PS4Gamer.--</li>
<li>KingLio.1L</li>
<li>and 2more</li>
</ul>
</div>› view on uplay
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="/js/app.js"></script>
<iframe src="chrome-extension://hgimnogjllphhhkhlmebbmlgjoejdpjl/bar.html" id="xh-bar" class="hidden"></iframe>
<img id="hzDownscaled" style="position: absolute; top: -10000px;">
</body>
</html>
I am trying to scrape a unique ID from a website depending on what a user enters into a text box. However, I am failing to use a correct Xpath, no matter what I try.
Here is my most recent attempt
string searchUsernameUrl = "https://www.r6db.com/search/" + txtUsername.Text;
HtmlWeb searchWeb = new HtmlWeb();
HtmlAgilityPack.HtmlDocument searchDoc = searchWeb.Load(searchUsernameUrl);
try
{
txtUplayID.Text = searchDoc.DocumentNode.SelectNodes("//div[#class='colums is-multiline search-results']/div[1]/div/div[1]/span")[0].InnerText;
}
catch (NullReferenceException)
{
MessageBox.Show("Unable to find username ID.", "Error");
}
Here is the html code to the website. Upon searching, any number of results may appear. In this example there are 3. I only want to copy the code from the first example.
Here is a picture of the HTML from the website upon searching, showing what I need an xpath for

asp:Buttons not functioning

I have a simple button, that when clicked should display text in a label. However when I press the button, nothing happens. Any ideas where i could be going wrong?
Default.aspx:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Button ID="testbutton" runat="server" Text="Button" OnClick="testbutton_Click" />
<asp:Label ID="testlabel" runat="server"></asp:Label>
</asp:Content>
Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void testbutton_Click(object sender, EventArgs e)
{
testlabel.Text = "You clicked the Testbutton";
}
}
Masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PhotoChunk</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/jquery.min.js"></script>
<!--<script src="js/jquery.easydropdown.js"></script>-->
<!--start slider -->
<link rel="stylesheet" href="css/fwslider.css" media="all" />
<script src="js/jquery-ui.min.js"></script>
<script src="js/fwslider.js"></script>
<!--end slider -->
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
<!----details-product-slider--->
<!-- Include the Etalage files -->
<link rel="stylesheet" href="css/etalage.css" />
<script src="js/jquery.etalage.min.js"></script>
<!-- Include the Etalage files -->
<script>
jQuery(document).ready(function($){
$('#etalage').etalage({
thumb_image_width: 600,
thumb_image_height: 400,
show_hint: true,
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
// This is for the dropdown list example:
$('.dropdownlist').change(function(){
etalage_show( $(this).find('option:selected').attr('class') );
});
});
</script>
<!----//details-product-slider--->
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-left">
<div class="logo">
<img src="images/logowhite.png" alt=""/>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="images/nav.png" alt="" /></a>
<ul class="nav" id="nav">
<li>Browse</li>
<li>Upload</li>
<li>About</li>
</ul>
<script type="text/javascript" src="js/responsive-nav.js"></script>
</div>
<div class="clear"></div>
</div>
<div class="header_right">
<!-- start search-->
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="What are you looking for?" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<!----search-scripts---->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch(document.getElementById('sb-search'));
</script>
<!----//search-scripts---->
<ul class="icon1 sub-icon1 profile_img">
<li><a class="active-icon c1" href="#"> </a>
<ul class="sub-icon1 list">
<li class="list_img"><img src="images/1.jpg" alt=""/></li>
<li class="list_desc"><h4>Matthew Thompson</h4></li>
<li><div class="login_buttons">
<div class="check_button">Account</div>
<div class="login_button">Logout</div>
</div>
<div class="clear"></div>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="footer_box">
<h4>About PhotoChunk</h4>
<li>About Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<h4>Support</h4>
<li>Contact Us</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<ul class="social">
<li class="facebook"><span> </span></li>
<li class="twitter"><span> </span></li>
<li class="instagram"><span> </span></li>
<li class="pinterest"><span> </span></li>
<li class="youtube"><span> </span></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I was able to get it working!
By deleting the extra form tags found in the master page, the button now works.
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="What are you looking for?" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>

how to get a confirmation popup to display using jquery and mvc 5?

I am trying to render a jquery popup onto a razor view. I have created a link in my view but when I click it I get a 404 error saying the page can't be found.
I have used jsbin.com so I know the jquery code is correct but clearly I am missing something, I guess I am either incorrectly rendering the javascript or I am trying to put the popup in a wrong file.
Can anyone explain what I have done wrong and why?
partial cshtml: popup
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$("#enableDisable").click(function () {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:220,
width:475,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
</script>
</head>
<body>
<a id="Link">
click me
</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
</body>
</html>
My Razor view requring the popup
#{
ViewBag.Title = "User Details";
}
<h2>User Details</h2>
<p><b>#ViewBag.UserName</b></p>
<table class="table">
<tr>
<th>
Application Name
</th>
<th>
Status
</th>
<th>
</th>
</tr>
#if (ViewBag.ApplicationStatuses.Count > 0)
{
#*Iterating Amadeus model using ViewBag *#
foreach (var item in ViewBag.ApplicationStatuses)
{
<tr>
<td>
#item.Key
</td>
<td>
#item.Value
</td>
<td>
<a href="~/Views/Home/ChangeStatusConfirmation" id="enableDisable">
Change Status
</a>
</td>
<td>
#Html.ActionLink("View Permissions", "Permissions", new { userID = View Bag.UserName, applicationName = item.Key })
</td>
</tr>
}
}
</table>
finally my layout view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Business Security System</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("MyTeam", "MyTeam", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<p style="color:grey; text-align:right; margin-top:15px">#System.Security.Principal.WindowsIdentity.GetCurrent().Name</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Any assistance will be greatly appreciated.
I ended up using an action link in my view instead of the action tab I used before as shown:
#Html.ActionLink("Change Status", "ChangeStatus", "Home", new { userName = ViewBag.UserName, applicationName = item.Key, currentStatus = item.Value }, new { #class = "enableDisable" })
and instead of having the Jquery code in a seperate file I put the code I needed in the view file and ran it from there.
<div id="dialog-confirm" title="Change Status?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#dialog-confirm").hide();
$(function () {
$(".enableDisable").click(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 220,
width: 475,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = "~/Home/ChangeStatus/username/dbname/currentstatus/"
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
</script>
}
This is not the most elegant solution but it works well in the solution I am working in.
href="~/Views/Home/ChangeStatusConfirmation" doesn't seems right.
It should be ~/ControllerName/ActionName. also if you are handling the click event you should not use the href attribute.

button not disabling after click

I am using this post to disable my buttons on click:
Prevent multiple form submits in MVC 3 with validation
This is my page source after it is rendered:
<!DOCTYPE html>
<html>
<head>
<title>Do not bookmark this page.</title>
<link href="/Content/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/styer.css?t=335" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/Views/main.js" type="text/javascript"></script>
<link rel="shortcut icon" href="/Content/favicon.ico" type="image/ico" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script language="javascript" type="text/javascript">
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$('input[type="submit"]').attr('disabled', 'disabled');
}
});
});
</script>
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg"></div>
<div id="logindisplay">
[ Log On ]
</div>
<div id="menucontainer">
<ul id="menu">
<li>Home</li>
<li>Logon</li>
<li>Register</li>
<li>Contact Us</li>
<li>News</li>
</ul>
</div>
<div id="main">
<h2>Forgot Username</h2>
<p>
Please provide the email address on your web account. Once validated, your username will be sent to your email address for your records.
</p>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<form action="/Account/ForgotUsername" method="post"> <div>
<fieldset>
<legend>Email address</legend>
<div class="editor-label">
<label for="EmailAddress">Email</label>
</div>
<div class="editor-field focus">
<input class="GenericTextBox" data-val="true" data-val-length="The Email must be at least 7 characters long." data-val-length-max="100" data-val-length-min="7" id="EmailAddress" name="EmailAddress" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
</div>
<p>
<input id="btn" class="makePaymentInput" type="submit" value="Submit"/>
</p>
</fieldset>
</div>
</form>
<div style="clear: both;"></div>
</div>
<div id="footer">
</div>
</div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project = 9150358;
var sc_invisible = 1;
var sc_security = "1af31df9";
var scJsHost = (("https:" == document.location.protocol) ? "https://secure." : "http://www.");
document.write("<sc" + "ript type='text/javascript' src='" + scJsHost + "statcounter.com/counter/counter.js'></" + "script>");
</script>
<noscript>
<div class="statcounter"><a title="web analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/9150358/0/1af31df9/1/" alt="web analytics"></a></div>
</noscript>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer"}
</script>
<script type="text/javascript" src="http://localhost:25759/610299fe88d74cee8d0267b4fc859da0/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
This works on most forms but this one, which is the main reason I used this code.
Anyone see why this one is not working?
Instead of writing this :-
$('input[type="submit"]').attr('disabled', 'disabled');
You should write this :-
$('input[type="submit"]').prop('disabled','true');

MVC4 with Telerik Editor not working

For some reason my Telerik MVC Editor() is not working. Can anyone spot what I´m doing wrong?
I´m using MVC4 with Razor view engine and Telerik version 2012.1.214
_Layout.cshtml includes this:
#using Smekklegt.Models
#using Telerik.Web.Mvc.UI
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="is" xml:lang="is">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.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.20.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/AjaxLogin.js")" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<!-- Skrár frá template-->
<link href="#Url.Content("~/Content/rikona/styles/galleriffic.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/rikona/style.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/rikona/js/jquery.opacityrollover.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/rikona/js/jquery.galleriffic.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/rikona/js/gallery-settings.js")" type="text/javascript"></script>
<!--[if IE 6]>
<script src="../../Content/rikona/js/ie6-transparency.js"></script>
<script>
DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
</script>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie8.css" />
<![endif]-->
#(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.css")
.Add("telerik.simple.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div id="wrap">
<div id="header">
<section id="login" style="float: right;">
#Html.Partial("_LogOnPartial")
</section>
<section style="float: left;">
<ul>
<li>#Html.ActionLink("Flokkar", "Index", "Category")</li>
<li>#Html.ActionLink("Vörur", "Index", "Product")</li>
</ul>
</section>
<div class="logo">
<img src="../../Content/rikona/images/smekklegt_banner2.jpg" alt="logo" width="400px;" />
</div>
<div id="nav">
<ul id="nav-pages">
<li>#Html.ActionLink("Forsíða", "Index", "Home")<span>|</span></li>
#foreach (Category category in (IEnumerable<Category>)ViewData["Categories"])
{
<li>#Html.ActionLink(category.Name, "FindProductsByCategory", "Product", new { catId = category.Id }, null)<span>|</span></li>
}
<li>#Html.ActionLink("smekklegt.is", "Contact", "Home")</li>
</ul>
</div>
</div>
<div id="frontpage-content">
<div id="container">
#RenderSection("featured", false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<div id="footer" style="margin-top: 15px;">
<div class="footer-line">
</div>
<p>
© #DateTime.Now.Year Smekklegt ehf</p>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
</ul>
</div>
</div>
#Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.Combined(true).Compress(true))
</div>
Create.cshtml includes this:
#using Telerik.Web.Mvc.UI
#model Smekklegt.Controllers.ProductFormViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Product</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Product.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Product.Name)
#Html.ValidationMessageFor(model => model.Product.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Product.FK_Category)
</div>
<div class="editor-field">
#*#Html.EditorFor(model => model.Product.FK_Category)*#
#Html.DropDownListFor(d => d.Categories, new SelectList(Model.Categories, "Id", "Name"))
#Html.ValidationMessageFor(model => model.Product.FK_Category)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Product.Description)
</div>
<div>
#{ Html.Telerik().EditorFor(m => m.Product.Description)
.Name("ProductCreateEditor")
.Encode(false)
.HtmlAttributes(new { style = "width: 500px;" })
.Tools(t => t.Clear()
.Bold().Italic().Underline().Separator().JustifyCenter().JustifyLeft().JustifyRight().JustifyFull())
//.Value((string)ViewData["ProductDescription"])
.Render(); }
</div>
<p>
<input type="submit" value="Stofna" />
<input type="button" value="Til baka" onclick="javascript:history.go(-1)"/>
</p>
</fieldset>
}
The problem I have is that every time I load my page the telerik editor appears but I can not write into the text area. (It looks like it were disabled) :(
Update
Remove this line from your Layout
<script src="#Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>
You only need one version of Jquery, they are conflicting is my best bet.
Everything else looks right
Remove this line
.Value((string)ViewData["ProductDescription"])
You are using EditorFor which pulls the value out of the model. So you only need to set the value in one place. You were trying to set it in two places, in the EditorFor and Value.
If you were using just Editor not EditorFor you can use Value
So choose to do EditorFor like so:
#{ Html.Telerik().EditorFor(m => m.Product.Description)
.Name("ProductCreateEditor")
...
.Render();
}
Or Editor
#{ Html.Telerik().Editor()
.Name("ProductCreateEditor")
...
.Value((string)ViewData["ProductDescription"])
.Render();
}
As John also states make sure the placement of your Telerik script is in the right place. It must be in the _Layout page at the bottom like so;
#(Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true)))
</body>
</html>

Categories

Resources