I am creating a Create,Edit,Delete application for simple one table.
I have Create get method and create post method views ready as i created my project using entity framework.
now in my current application it is opening a new page to create new data and what i want is to open a pop up in which I add required fields and than when I click on ADD it will add those data in database.
FloorFactorsController.cs
public PartialViewResult Create()
{
return PartialView();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "FloorFactorPercentage,FromDate,ToDate")] FloorFactor floorFactor)
{
if (ModelState.IsValid)
{
db.FloorFactors.Add(floorFactor);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(floorFactor);
}
Index view.cshtml required part of full code.`
Here, I have add ajax.actionlink for adding an CREATE NEW link which redirect to my get method createin controller class. I have added all required .css and js files i.e. jquery.js, dialog.js,dialog.css etc.
<p>
#Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "Get" ,UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" }) <br />
</p>
<div id="result" style="display:none;">
<button type="button">success</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
});
function openPopup() {
$("#result").dialog("open");
}
</script>
`
It Gives error
Object doesn't support property or method 'dialog'
I don't know what to do i have referred this QUESTION but this is not working for me.
EDIT _layout.cshtml File
<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/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="~/Content/jquery-2.2.3.js"></script>
<link type="text/css" href="~/Content/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="~/Content/jquery-ui.js"></script>
<script src="~/Content/dialog.js"></script>
<link href="~/Content/dialog.css" rel="stylesheet" />
Sorry, I can't add a comment because my reputation lower than 50. Did you ever read this:
Object doesn't support property or method 'dialog'
? I think that you didn't include jquery file properly.
My guess is that you're importing a CDN or downloaded version of jQuery UI that doesn't include the dialog widget.
To test this theory, replace the script reference for jQuery UI with the following:
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
I have other questions about what you're actually trying to achieve here, since your controller has ActionResult methods instead of JsonResult and why you're GETting a request to a method that is decorated with [HttpPost], but that's not what you're asking about in this question.
Well after so much surfing on new i found few useful links and got solution to my question.
In order to use jquery-ui files i required to put those files in #Scripts.render(""); as it is best practice to add all script and style files in it for better performance.
I was unable to add #Script & #Styles in my project. It was giving me error that it is not in the context. so this Question solved my that problem. than i just pasted link in it and my dialog start working fine. still i am trying to open dialog box using ajax but i did open dialog box using javascript.
Code to open pop up with javascript :
<div>
<input type="text" id="Name" />
<input type="text" id="Address" />
<button onclick="OpenDialog()">
Open Dialog</button>
</div>
<div id="Dialog-Box">
<input type="text" id="Dialog-Name" />
<input type="text" id="Dialog-Address" />
<input type="submit" onclick="onsave()" value="save" />
</div>
<script>
$('#Dialog-Box').dialog({
autoOpen: false,
height: 500,
width: 700,
modal: false
});
function OpenDialog() {
var name = $('#Name').val();
var address = $('#Address').val();
$('#Dialog-Name').val(name);
$('#Dialog-Address').val(address);
$('#Dialog-Box').dialog('open');
}
function onsave() {
$.ajax({
url: '#Url.Action("ActionName", "ControllerName")',
type: 'POST',
data: {
name: $('#Dialog-Name').val(),
address: $('#Dialog-Address').val()
},
success: function (msg) {
},
error: function (msg) {
}
});
}
</script>
Thank you everyone for efforts.
Related
I'm trying to create a dashboard/graphical interface for managing purposes. How can I create buttons that call certain functions from a controller? It's in ASP.NET CORE 3, using the MVC-pattern.
What I want to do in the application is executing c# code by calling a method from my Index.cshtml page and passing parameters.
I've tried multiple solutions, namely those that state that the view and controller are synced with the controller function looking for the "equally named" view but it just doesn't work.
Edit: Found the solution: I needed to specify both the controller and ActionResult.
<form action="Home/Change" method="post">
<input type="text" name="DoorID" placeholder="Guid.." />
<br />
<input type="submit" value="Post" />
</form>
I was apparently not smart enough to read the countless tutorials.
Thanks for the help!
If you want to send a piece of data after the button click to the server, you should create a form in your view and a post action in your controller. However, if you don't want to post any data and you want to simply do something after button click, creat a get action in your controller and navigate to that action path using button click event. Finally, you can return the same page at your action and do what you want before hand.
Use [httpGet("path")] attribute on top of any public function in your controller to Mark it as action. Then you can invoke it in HTML using something like this <a asp-action="path">sth</a>
since you only wants to trigger a function on a btn click and pass some data i recommend you to make an ajax call to the back-end using java script or jquery is the more effective way.
it will look like this
$('#btn').click(function () {
$.post( "your action url ", { name: "John", time: "2pm" } )
.done(function(data)
{
// in case your action return some data it will be in the "data" variable
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- you need to have jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value="click me ">
</body>
</html>
I want some radio buttons styled the way JQuery does it. I've now got demo code working that shows that in a minimal HTML page, but I need to do that now in an ASP.NET C# page. The following code works fine, where REDACTED points to a local-network server:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</body>
</html>
But the following shows me ordinary, non-JQuery-styled radio buttons. The date picker does work (showing that JQuery is running) and messages show up as a pop-up and in the console, showing that the function is running, but the buttons aren't being styled.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>
<html>
<head id="hgs_head" runat="server">
<meta charset="utf-8">
<title>JQuery Test</title>
<!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<!-- Radio button styling -->
<script>
$(function () {
console.log("ready!");
alert("Hi!");
$("radio").buttonset();
});
</script>
</head>
<body id="hgs_body" runat="server">
<p>Date Picker using JQuery:</p>
<input type="text" name="date" id="date"><script>$("#date").datepicker();</script>
<!-- MAIN CONTENT -->
<div id="main">
<p>Radio Buttons using JQuery:</p>
<form class="messages" id="messages" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"/>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
</div>
</form>
</div>
</body>
</html>
I figure the problem has to do with this page being ASP.NET with the buttons being created through an .aspx page (the .aspx.cs page is blanked out for demo purposes by the way). But the point of using "$(function" is that it only runs once the page is fully assembled, so the radio buttons should already be there.
What do I need to do, to make the styling work?
(Follow-up note: I didn't do it in this example, but the actual buttons are ASP.NET code. That wasn't the problem though; see answer. If you're having the same problem note that you apparently need to call the JQuery function to style them again if the page updates.)
During page load, you are assigning the buttonset property to element which is of type tag : radio. No such element exists in your DOM. You need to target the div where you want to apply the buttonset. In short, you are missing '#' in your selector.
$(function () {
console.log("ready!");
alert("Hi!");
$("#radio").buttonset();
});
This link leads to a document from an open nutrition database:
http://www.dabas.com/ProductSheet/Detail.ashx/124494
Im trying to fetch some information from this page with the help from xpath.
The problem is this, when i choose "view source", in order to find out what tags I am after, all I get is this:
<!DOCTYPE html>
<html>
<head>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<title>ProductSheetLoader</title>
</head>
<body>
<div style="position:absolute; left:50%; top:50%; width:500px; height:200px; margin-top:-100px; margin-left:-266px; padding:15px; color:#666;">
<h1><img src="../../images/ajax-loader.gif" /> Produktbladet laddas...</h1>
</div>
<input id="hiddenARIDENT" name="ARIDENT" type="hidden" value="124494" />
</body>
<script type="text/javascript">
$(document).ready(function () {
var url2 = "/ProductSheet/Details.ashx/" + $('#hiddenARIDENT').val()
$.ajax({
url: url2,
cache: false,
success: function (respones) {
with (window.document) {
write(respones);
close();
}
}
});
});
</script>
</html>
It seems to me that all the info is getting loaded from somewhere else.
If i press f12, I can see all the info I want but how can I Acess this info? Is it possible?
Any help appreciated.
The original page just loads the actual content with ajax, and replaces the document contents with it. The actual information in this case is available at /ProductSheet/Details.ashx/124494, (note the s in Details.ashx, which contains the actual page contents.
Generally, the server might check whether the request also contains the X-Requested-With: XMLHttpRequest header, but it does not seem to be the case here.
I have folder structure like this for asp.net site :
now i run the site and result is like this :
here i am able to see the image "6".
now on click on : button , i am opening another page : dashboard.aspx:
$(document).ready(function () {
$("#btnDashBoard").on("click", function () {
debugger;
window.location.href = "dashboard/dashboard.aspx";
return false;
});
});
here i am not able to see my image, why?
my site.master html is like this :
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btnDashBoard").on("click", function () {
debugger;
window.location.href = "dashboard/dashboard.aspx";
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnDashBoard" type="button" value="button" />
</div>
<div>
<img src="../Images/orderedList6.png" alt="" />
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
You should let ASP.NET help you figure out the paths. There's a utility method on every Control named ResolveClientUrl(). If you pass it the virtual path to a file, it will resolve its full path.
You can use it right in the src attribute for your <img> tag:
<img src='<%= Path.ResolveClientUrl("~/Images/orderedList6.png") %>' alt="" />
I had a problem which was, my path was for example: https://mysite/projects/index
And my html stored in database had an image with this src: ~/Images/myimg.png
So the path i was getting for the image was:
https://mysite/projects/index/~/Images/myimg.png
I just removed the "~" from my source and everything was solved, it lead to image path which was: https://mysite/Content/Images/myimg.png
Hope this helps
I want to highlight my elements and add a link with jquery.
My Code:
#model IEnumerable<Mvc3Demo.Products>
#{
ViewBag.Title = "List";
}
<h2>List</h2>
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
<script type="text/javascript">
$(document).ready(function () {
$('#productList li').hover(
function () {
$(this).css({ 'background': 'green', 'cursor': 'pointer' });
},
function () {
$(this).css('background', '');
}
).click(function () {
window.location = 'Product/Edit/' + $(this).attr('productid');
});
});
</script>
<ul id="productList">
#foreach (Mvc3Demo.Products p in Model)
{
<li productid="#p.ProductsID">
#p.Name
<!--#Html.ActionLink("Bearbeiten", "Edit", "Product", p, null)-->
</li>
}
</ul>
Layout page:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The JQuery will be found so that couldn't be the error ( i proofed it with firebug)
Error:
No Error occurs in Firebug and no highlighting and no link
Please help
I've put the HTML which would be output from your example above into a fiddle. As you can see, it appears to work correctly.
Is the URL in your reference to jQuery correct?
Don't you have something in your Layout page that broke the jQuery functionality?
Try to unbind your page from the Layout and test it indipendently.
Or post your Layout page to let us see what could be wrong with it...
Edited after seeing the Layout page:
There's the error. you already have the jquery reference in the layout page. This cause the error. Simply delete the reference from you page leaving the one in the layout) and everything is going to work.
I created a littel project to test it.
PS: I still don't understand why 2 references to the same javascritp file cause the error :/
try to type
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
instead of
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />