Hi I am new to webpage development, verified all related questions in Stack over flow but still I cant get the solution.
I am trying to include Autocomplete function in a input box and its works fine if my Layout = null; in View file, where as if I used my existing view template ViewBag.Title = "Home Page"; Autocomplete function is not working
View File:
#model IEnumerable<AspNetRoleBasedSecurity.Models.PostModel>
#{
ViewBag.Title = "Home Page";
}
<div class="row search-row">
<input class="search ui-autocomplete-input" type="text" id="CityName" placeholder="What do you need help with?"/>
<a class="buttonsearch btn btn-info btn-lg" href="search-results.html">Search</a>
</div>
Script Used:
<script type="text/javascript">
$(document).ready(function () {
$("#CityName").autocomplete({
source: function (request,response) {
$.ajax({
url: "/Home/GetRecord",
type: "POST",
dataType: "json",
data: { prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Title, value: item.Title };
}))
}
})
},
});
});
</script>
Ref
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
C#
public JsonResult GetRecord(string prefix)
{
DataSet ds = PostRepo.GetName(prefix);
List<search> searchlist = new List<search>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
searchlist.Add(new search
{
Title= dr["Title"].ToString(),
Tags = dr["Tags"].ToString(),
Id = dr["Id"].ToString()
});
}
return Json(searchlist, JsonRequestBehavior.AllowGet);
}
I cant understand why its not working if ViewBag.Title = "Home Page"; No error message received but autocomplete feature not works.
Please help me in understanding the concept.
May be Check Layout out page scripts that you have referred
and don't add in child views any scripts because scripts may conflict with multiple versions
here is the working example auto complete
Related
I need to change the view in same page using ajax when the user changes the option of the drop-down list.
Up until now in my view I have the drop down list
<div class="wrapper">
<div>
<label>Get cars per people </label>
#Html.DropDownList("ddlChange", new SelectList(ViewBag.OptionsList,"Value","Text", ViewBag.selectedValue),new { #id = "ddlChangeID" })
</div>
<div class="box box-success">
<div class="box-body">
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
Then in a script (which I found from another question)
$(document).ready(function () {
$("#ddlChangeID").change(function () {
var strSelected = "";
$("#ddlChangeID:selected").each(function () {
strSelected += $(this)[0].value;
});
var url = "/Cars/Index/" + strSelected;
$.post(url, function (data) {
});
});
})
And in the controller I am using ViewBag values to save the drop-down list values and whatever else is needed for the graph which loads in a different script again with ViewBag values. I have managed to pass the selected value (strSelected) but the view does not reload with the new data.
How should I make the ajax event?
Change your script ajax call by calling an action result as follows
$("#ddlChangeID").change(function () {
$.ajax({
url: "/Controller/ActionHtml?id="+$('#ddlChange').val(),
type: "POST",
cache: false,
success: function (result) {
$("#myChart").html(result);
},
error: function () {
$("#myChart").empty();
}
});
});
and in the controller the actionresult will be like the following which returns the html partial view that you need to append
public ActionResult ActionHtml(string id)
{
//Here you can load the data based on the id,pass model to the patial views etc
ViewBag.id = id;
return PartialView("~/Views/Shared/myhtml.cshtml");
}
myhtml.cshtml will be a partial view with the html content as
//content is dummy,change the content as you want
<!DOCTYPE html>
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
</form>
So I changed the
#Html.DropDownList("ddlChange", new SelectList(ViewBag.OptionsList,"Value","Text", ViewBag.selectedValue),new { #id = "ddlChangeID" })
To
#Html.DropDownList("ddlChange", new SelectList(ViewBag.OptionsList,"Value","Text", ViewBag.selectedValue),new { #onchange = "ChangeOption()" })
adding also an id to the main div.
And the script to
function ChangeOption() {
var id = $('#ddlChange').val();
$.ajax({
url: '/Cars/Index',
type: "GET",
data: { Id: id },
success: function (data) {
$('#wrapAll').html(data);
}
});
}
It seems to work. Only issue now is that the css breaks.
It pushes the graph and drop-down list to the right breaking
the functionality.
I am trying to create a cascading DropDownList on ASP.NET RazorPage. After doing some research I found the most common way to do the task is utilizing jQuery in my View. Nearly all demos and examples I found online implement a cascading DropDownList in previous ASP.NET versions, more specifically MVC. I tried translating these examples in the context of how I need them but I am having no luck, most likely due to syntax errors and/or other reasons.
I am using ASP.NET Core 2.2
I am having trouble specifically implementing the dynamic function call (GetSubCategory) whenever an item is selected in the first DropDownList which is displaying correctly
<form asp-controller="my_dropdown" asp-action="CreatePortfolio" method="post" class="form-horizontal" role="form">
<div class="form-group">
<div class="row">
<div class="alert-danger" asp-validation-summary="ModelOnly"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<label for="CategoryName">Category</label>
#Html.DropDownList("categorylist",
new SelectList((System.Collections.IEnumerable)ViewData["categorylist"], "CategoryId", "CategoryName"), "Select Category", "CategoryName")
<label for="SubCategoryName">Subcategory</label>
#section scripts{
<script type="text/javascript">
//Insert default item "Select" in dropdownlist on load
$(document).ready(function () {
var items = "<option value='0'>Select</option>";
$("#colorselect").html(items);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#CategoryId").on("change", function () {
$list = $("#SubCategory");
$.ajax({
type: "GET",
url: '/CreatePortfolio',
data: { id: $("#CategoryId").val() },
traditional: true,
success: function (response) {
$list.empty();
$.each(result, function (i, item) {
$list.append('<option value="' + item["SubCategoryId"] + '"> ' + item["SubCategoryName"] + '</option>');
});
},
error: function () {
alert("Something went wrong"); // Hide loader icon
},
});
})
})
</script>
}
</div>
</div>
</div>
Code behind the view
public JsonResult GetSubCategory(int CategoryId)
{
subcategorylist = _context.GetAllSubCategories(CategoryId);
//ViewData["subcategorylist"] = subcategorylist;
return new JsonResult(subcategorylist);
}
public void OnGet()
{
// ----- Getting Data From Database Using Stored Procedure -----
categorylist = _context.GetAllCategoires();
// ----- Assigning categorylist to ViewData["categorylist"] in order to access it in the view -----
ViewData["categorylist"] = categorylist;
}
I want the code to correctly display the SubCategories associated to the Category by CategoryId which is a field in both classes/tables
When I select Date in DateTimePicker, it's invoking public ActionResult Index(DateTime? test). It returns some items into the view, but those items do not appear on Index. It seems that this does not work, and I'm unsure why:
<h1>Items</h1>
#foreach (var item in Model)
{
<br />#item.Date
}
Controller:
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
List<Table> temp = new List<Table>();
return View(temp);
}
[HttpPost]
public ActionResult Index(DateTime? test)
{
masterEntities m = new masterEntities();
List<Table> temp = m.Table.Where(key => key.Date == test).Select(key => key).ToList();
return View(temp);
}
}
Index.cshtml:
#model IEnumerable<DatePicker.Models.Table>
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$('#datetimepicker1').datetimepicker({ useCurrent: false });
$('#datetimepicker1').on("dp.hide", function (e) {
//var temp = $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm')
$.ajax({
url: "/Home/Index",
type: "POST",
data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
//data: {test: temp },
});
});
</script>
</div>
</div>
<h1>Items</h1>
#foreach (var item in Model)
{
<br />#item.Date
}
First you send an empty list to the view:
List<Table> temp = new List<Table>();
return View(temp);
So the loop doesn't show anything because, well, there's nothing to show. It's an empty list.
Then you make an AJAX request to get items:
$.ajax({
url: "/Home/Index",
type: "POST",
data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
//data: {test: temp },
});
But you don't do anything with those items. You basically ignore the response from the AJAX request.
So... The data doesn't display because you haven't written any code to display the data. The AJAX request should have some sort of callback function to do something with the returned response:
$.ajax({
url: "/Home/Index",
type: "POST",
data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
//data: {test: temp },
success: function (data) {
// do something with the response here
}
});
What you do with the response is up to you. Is it JSON? HTML? Based on the server-side code, it looks like it's HTML. So you can maybe put it into an element on the page. Something like this, perhaps:
$('#someElement').html(data);
That's just one example, and would of course require an element of some sort that you can identify to hold the response. You could do a lot of other things with the response.
One thing to note, however, is that your response appears to be an entire page. It includes script tags, link tags for CSS, and all sorts of markup that you otherwise already have on the client. So putting the entire page into an element isn't going to work right.
You might want to return just a partial view for this AJAX response. Or, otherwise, instead of using AJAX at all just navigate to the action to get that entire page.
I am new in ajax and I need a help.
This is a script that populates second dropdownlist once first is selected.
It works fine using GetStates action that gets data from database.
<script type="text/javascript">
$(document).ready(function () {
$("#CountriyID").change(function () {
var abbr = $("#CountriyID").val();
$.ajax({
url: "/SetUp/GetStates",
data: { countryCode: abbr },
dataType: "json",
type: "POST",
error: function () {
alert("An error occurred.");
},
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
});
$("#StateID").html(items);
}
});
});
});
</script>
Here is the view that I am working on
#using (Html.BeginForm("Index", "SetUp", FormMethod.Post))
{
<form action="" method="post">
<input type="submit" name="action:AddCity" value="Add" />
</form>
<div class="editor-field">#Html.DropDownListFor(model => model.CountriyID, new SelectList(Model.Countries, "ID", "Text"))</div>
<div class="editor-field">#Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "ID", "Text"))</div>
}
If I need to add a City I click on a submit button and it goes to correct action.
The problem happened when I populate dropdownlist. After population, the City button do not respond anymore. It looks like the url get stack at "/SetUp/GetStates" and I cannot do any actions anymore on my form.
Please Let me know what am I doing wrong and where to take a look?
Thanks in advance.
try the below code hope it helps you:
<form action="" method="post">
<div class="editor-field">#Html.DropDownListFor(model => model.CountriyID, new SelectList(Model.Countries, "ID", "Text"))</div>
<div class="editor-field">#Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "ID", "Text"))</div>
<input type="submit" name="action:AddCity" value="Add" />
</form>
As the drop down must come into the tags and submit must be at the last place in the tags ideally.
I have a pretty simple index page for an MVC project which allows you to create "jobs" and edit existing jobs. I'm trying to use an Ajax link to replace the contents of a div with the job-edit form, which the Create() and Edit() actions return as a partial view. Instead, when you click on the Ajax links, the entire page content is replaced with the partial view, instead of just the contents of the appropriate div element. Here's the relevant .cshtml code:
#{
string placeholder = "777777";
}
<body>
<ol id="JobListing">
#Html.Partial("_ExportJobListingPartial", Model)
</ol>
<br /><br /><br />
#Ajax.ActionLink("New", "Create", new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
<br /><br />
<div id="EditJobLinkContainer">
#Ajax.ActionLink("Edit", "Edit",
new { id = placeholder }, // Route values
new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
new { id = "EditJobLink" } // Html attributes
)
</div>
<br /><br />
<div id="EditJobContainer">
EMPTY BOX HERE
</div>
<br />
</body>
</html>
<script>
$(function() {
$("#JobListing").selectable({
selected: function (event, ui) {
// Select only one at a time
$(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
$("#EditJobLinkContainer").html('#Ajax.ActionLink("Edit", "Edit",
new { id = placeholder }, // Route values
new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
new { id = "EditJobLink" } // Html attributes
)');
$("#EditJobLink").click(UpdateOnClick);
}
});
$("#EditJobLink").click(UpdateOnClick);
function UpdateOnClick() {
//Get the id of the selected item
var id = $(".ui-selected").first().attr("name");
this.href = this.href.replace("#placeholder", id);
}
});
</script>
Most of the answers I've read online to similar questions suggest that maybe I'm not including the unobtrusive-ajax code correctly or in the right place. I have it in the _Layout view, before the RenderBody() call, as
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
I know this code is loading in because I inserted an alert() call into the unobtrusive-ajax.js file which launches on page load, and the links to the code in Chrome work fine. However, I had to manually replace the calls to live() with on() in the ajax scripts since live() is deprecated in the most recent version of jQuery, even though I'm pretty sure they're the latest scripts with MVC4. At one point the Ajax call was actually working for the "New" link, but I've made changes since, and nothing has been working for a few days now. Any help would be greatly appreciated.
I use empty dedicated div for that
the html is
<div id="targetDiv">
and the script is
$(".get-roles").live("click", function (e) {
$("#targetDiv").empty();
$.ajax({
url: "edit",
type: 'GET'
xhrFields: {
withCredentials: true
},
success: function (data) {
if (data) {
$("#targetDiv").append(data);
}
else {
$("#targetDiv").text("Error");
}
}
});
});
you need to include this in your page
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>