We Keep Coding

ASP.NET [Route("api/dvds/search")] function does not get called

I am making an ajax call to 'http://localhost:44315/api/listings/search', which can take in four parameters, such as title, releaseYear, director, and rating, but everytime I call the route, when debugging, the function Search() never gets called. I have also tried postman, but it seems like whatever tool I use, it just hangs and fails to reach the path. If you know another way of setting this route, I would like to know.
Here is my ListingsAPIController.cs
public class ListingsAPIController : ApiController
{
[Route("api/dvds/search")]
[AcceptVerbs("GET")]
public IHttpActionResult Search(string title, int? releaseYear, string director,
string rating)
{
var repo = DvdRepositoryFactory.GetRepository();
try
{
var parameters = new ListingSearchParameters()
{
Title = title,
ReleaseYear = releaseYear,
Director = director,
Rating = rating
};
var result = repo.Search(parameters);
return Ok(result);
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
}
Views/Listings/Search.cshtml:
#section Scripts
{
<script>
$(document).ready(function () {
$("#searchForm").submit(function (e) {
search();
return false;
});
});
function search() {
var params;
params = 'title=' + $('#title').val() + '&releaseYear=' + $('#releaseYear').val() + '&director=' +
$('#director').val() + '&rating=' + $('#rating').val();
$.ajax({
type: 'GET',
url: 'http://localhost:44315/api/dvds/search?' + params,
success: function (results) {
console.log("search");
$('#searchResults').empty();
$.each(results, function (index, dvd) {
var html = '<div class="col-xs-8 col-sm-4 col-md-4">' +
'<div class="card" style="border:2px solid #0094ff; width: 20rem; border-radius: 5px; ">' +
'<div class="pl-3 pt-1 text-center">' +
'<h4 class="card-title text-primary">' + dvd.Title + '</h4>' +
'<p class="recentListing">' + dvd.ReleaseYear + '</p>' +
'<p class="recentListing">' + dvd.Director + '</p>' +
'<p class="recentListing">' + dvd.Rating + '</p>' +
'<p class="recentListing">' + dvd.Notes + '</p>' +
'</div>';
$('#searchResults').append(html.toString());
});
},
error: function () {
alert('Error performing search, try again later!')
},
done: function () {
alert('Search AJAX complete')
}
});
}
</script>
}
I have tried renaming the route from listings to dvds, but still getting error.
UPDATE: What I have learned is that Visual Studio 2019 has forced projects to use the "Configure for HTTPS" option when changing Authentication to "Individual User Accounts". HTTP used to be the default for older versions.

You call http while your api at https so in your search page call https
url: 'https://localhost:44315/api/dvds/search?'
or just delete the base URL :
url: '/api/dvds/search?'
Check your query maybe you have an error in SQL

Bad request While Sending multipart/form-data to mvc controller using dynamically created HTML form

I have read all related question on all the portals since 2 days but i aint able to fix this issue , please look into this.
I have created a dynamic html form :
var jsprintId = "#Model.print.Id";
function DisplayIfExists(jsimageType, reqdiv) {
var d = document.getElementById(reqdiv);
$.ajax({
type: 'GET',
data: { printId: jsprintId, imageType: jsimageType },
url: '/Prints/'+jsprintId+'/Image/'+jsimageType,
success: function (response) {
if (response == "NoImage") {
d.innerHTML = "<form method='POST' action='http://localhost:5000/Prints/"+jsprintId+"/edit/UploadPrintImage' enctype='multipart/form-data' id='frmUploadIconImage'>" +
"<h1 style='text-transform:capitalize;margin-left:15px'>" + jsimageType + " Image</h1>" +
"<input type='hidden' name='printId' value='"+jsprintId+"'>"+
"<div class='row' style='margin: 1em -1em;'>" +
"<div class='col-md-10' style= 'padding: 0; overflow:hidden;'>" +
"<label type= 'text' class='form-control txtbox' id= 'lbl_svg_icon' style= 'margin-left:27px;height:34px'> Icon Image (SVG)</label>" +
"</div>" +
"<label class='btn btn-primary' for='svg_file_icon'>Browse<input type='file' name='svg_file_icon' id='svg_file_icon' style='display:none'/></label>" +
"</div>" +
"<div class='row text-center'>" +
"<input class='btn btn-primary' type='submit' value='Upload' id='btnUploadSubmit'/>" +
"</div>"
"</form>";
}
else {
d.innerHTML = "<img src='" + response + "' style='width:150px'> "
}
}
})
}
and my function for Sending this post request is :
$(function(){
$("#tabs-test").on('submit', '#frmUploadIconImage', function (form) {
form.preventDefault();
var data = new FormData(this);
if (iconImageValid) {
for (var key of data.entries()) {
console.log(key[0] + ', ' + key[1]);
}
$.ajax({
url: '#Html.Raw(Url.Action("UploadPrintImage", "Prints"))',
data: data,
method: 'POST',
cache: false,
contentType: false,
processData: false,
success: function (response) {
DisplayIfExists(jsimageType, "tabs-test");
},
error: function (error) {
console.log('your problem is ' + error.statusText);
console.log(error);
}
});
}
else {
alert("You can upload only SVG files");
$("#lbl_svg_icon").parent().addClass("has-error");
$("#lbl_svg_icon").text("SVG File");
return false;
}
});
});
the error I get is a bad request , my controller action is :
[HttpPost("Prints/{printId}/edit/UploadPrintImage")]
[Consumes("multipart/form-data")]
public async Task<ActionResult> UploadPrintImage(IFormCollection form)
{
//my code
}
it gives me the same error with all the argument type that i define i have tried the following :
public async Task<ActionResult> UploadPrintImage(FormCollection form);
public async Task<ActionResult> UploadPrintImage(HttpContext form);
public async Task<ActionResult> UploadPrintImage(HttpRequest form);
public async Task<ActionResult> UploadPrintImage(string printId, IFormfile file);
and all possible combinations but nothing works all it gives is a 400 BAD request.
following is my request screenshot:
the same code works when i have a hardcoded html form but not with dynamically created html form.
looking forward to a working solution. Thanks

Get clicked image id on dynamic div

In here I am able to display university images on dynamically created div. Now I want to get id of the university image which user selected, then use that id to display courses which selected university offer. Is there way to do that?
protected void fetchUniversities()
{
List<University> uniList = new List<University>();
using (var dd = new UniversityContext())
{
uniList = UniversityController.fetchUniversitiesOfferCourses(dd);
}
Literal header = new Literal();
header.Text = "<div class=\"container\"><div class=\"row\"><h2>Apply For University</h2><p>Select your preferred university</p></div></div>";
CompanyPanel.Controls.Add(header);
foreach (var item in uniList)
{
Literal label1 = new Literal();
label1.Text = "<div class=\"container\"><div class=\"row\" >";
Literal lblTwo = new Literal();
lable2.Text = "<img src=\"/template/images/" + item.ImageName + "\" height=\"100%\"/>";
Literal lblLast = new Literal();
label3.Text = "</div></div>";
Panel1.Controls.Add(label1);
Panel1.Controls.Add(label2);
Panel1.Controls.Add(label3);
}
}

You could achieve this in a better way by moving to a different framework and return data (e.g. JSON) in response to an ajax query (have a look at ASP.NET MVC).
Here is a way to achieve this using your example, it's a bit cumbersome and I haven't tested it but should get you in the right direction
Add a method as follows:
[WebMethod]
public static string GetUniversityCourses(int universityId)
{
List<UniversityCourses> courses = ...
StringBuilder coursesHtml = new StringBuilder();
foreach(var course in courses) {
//Generate your html here
coursesHtml.Append("<div>" + course.Name + "</div>";
}
return coursesHtml.toString();
}
Then add this javascript code to you aspx file:
function GetUniversityCourses(id) {
$.ajax({
type: "POST",
url: "Default.aspx/GetUniversityCourses",
data: {"id": id,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
},
complete: function (jqXHR, status) {
$("#coursesContainer_" + id).html(jqXHR.responseText);
}
});
}
Then in your server side code:
lable2.Text = "<img src=\"/template/images/" + item.ImageName + "\" height=\"100%\"/><div id=\"coursesContainer_\"" + item.Id + "</div><script>$('a[data-getcourseid=\"" + item.Id + "\"]').on('click', function() { GetUniversityCourses(" + item.Id + ")}</script>";

Why does the data come back as undefined?

I'm not understanding why the data is coming back as undefined. It knows there is something there but the value is not being shown. Am I forgetting to do something in the main function? Thanks in advance to whom may solve my dilemma.
Here is the current output I'm getting:
Here is what I need the output to render:
Here is the code for my employee.js:
$(function() {
ajaxCall("Get", "api/employees", "")
.done(function (data) {
buildTable(data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
errorRoutine(jqXHR);
}); // ajaxCall
});
// build initial table
function buildTable(data) {
$("#main").empty();
var bg = false;
employees = data; // copy to global var
div = $("<div id=\"employee\" data-toggle=\"modal\"data-target=\"#myModal\" class=\"row trWhite\">");
div.html("<div class=\"col-lg-12\" id=\"id0\">...Click Here to add</div>");
div.appendTo($("#main"));
$.each(data,function(emp){
var cls = "rowWhite";
bg ? cls = "rowWhite" : cls = "rowLightGray";
bg = !bg;
div = $("<div id=\"" + emp.Id + "\" data-toggle=\"modal\" data-target=\"#myModal\" class=\"row col-lg-12" + cls + "\">");
var empId = emp.Id;
div.html(
"<div class=\"col-xs-4\" id=\"employeetitle" + empId + "\">" + emp.Title + "</div>" +
"<div class=\"col-xs-4\" id=\"employeefname" + empId + "\">" + emp.Firstname + "</div>" +
"<div class=\"col-xs-4\" id=\"emplastname" + empId + "\">" + emp.Lastname + "</div>"
);
div.appendTo($("#main"));
}); // each
} // buildTable
function ajaxCall(type, url, data) {
return $.ajax({// return the promise that '$.ajax' returns
type: type,
url: url,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: true
});
}
Here is my Controller method code:
// GET api/<controller>
[Route("api/employees")]
public IHttpActionResult Get()
{
try
{
EmployeeViewModel emp = new EmployeeViewModel();
List<EmployeeViewModel> allEmployees = emp.GetAll();
return Ok(allEmployees);
}
catch(Exception ex)
{
return BadRequest("Retrieve failed - " + ex.Message);
}
}

The first parameter of the callback is the index, the value is in the second parameter:
$.each(data,function(index, emp){

ReferenceError: getMessage not defined

I am building a messaging area similar to facebook and I am using ajax with jquery and a asmx web service to serve the html to the client. My li click event works when the content is first loaded on page load using c#, but when ajax runs and refreshes the content from the web service the li event doesn't work anymore.
This an example of the html that is returned from the web service
<ol class="messagesrow" id="messages">
<li id="2345">
<div>Test Element</div>
</li>
</ol>
Web service markup
[WebMethod]
public string GetMessagesByObject(string id, string objectid, string userid, string timezone)
{
string output = string.Empty;
try
{
StringBuilder str = new StringBuilder();
DataSet results = results from store procedure
str.Append("<ol class=\"messagesrow\" id=\"messages\">");
for (int i = 0; i < results.Tables[0].Rows.Count; i++)
{
DataRow row = results.Tables[0].Rows[i];
DateTime date = Convert.ToDateTime(row["CreateDate"].ToString()).AddHours(Convert.ToDouble(timezone));
if (!TDG.Common.CheckStringForEmpty(row["ParentMessageID"].ToString()))
{
str.Append("<li id=\"" + row["ParentMessageID"].ToString() + "\">");
}
else
{
str.Append("<li id=\"" + row["MessageID"].ToString() + "\">");
}
str.Append("<div style=\"width:100%; cursor:pointer;\">");
str.Append("<div style=\"float:left; width:25%;\">");
if (!TDG.Common.CheckStringForEmpty(row["ImageID"].ToString()))
{
str.Append("<img src=\"/Resources/getThumbnailImage.ashx?w=48&h=48&id=" + row["ImageID"].ToString() + "\" alt=\"View Profile\" />");
}
else
{
str.Append("<img src=\"/images/noProfileImage.gif\" alt=\"View Profile\" />");
}
str.Append("</div>");
str.Append("<div style=\"float:left; width:75%; padding-top:4px;\">");
str.Append("<strong>" + row["WholeName"].ToString() + "</strong>");
str.Append("<br />");
if (row["BodyMessage"].ToString().Length < 35)
{
str.Append("<span class=\"smallText\">" + row["BodyMessage"].ToString() + "</span>");
}
else
{
str.Append("<span class=\"smallText\">" + row["BodyMessage"].ToString().Substring(0, 35) + "</span>");
}
str.Append("<br /><span class=\"smallGreyText\">" + String.Format("{0:g}", date) + "</span>");
str.Append("</div>");
str.Append("</div>");
str.Append("</li>");
}
str.Append("</ol>");
output = str.ToString();
}
catch (Exception ex)
{
throw ex;
}
return output;
}
Jquery markup
$(document).ready(function () {
$("ol#messages li").click(function () {
var id = $(this).attr("id");
getMessage(id);
});
});
function getMessage(id) {
var timezone = $('#<%= hdfTimezone.ClientID %>').val()
var userid = $('#<%= hdfUserID.ClientID %>').val()
$.ajax({
type: "POST",
async: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "/Resources/MessageWebService.asmx/GetMessage",
data: "{'id':'" + id + "','timezone':'" + timezone + "','userid':'" + userid + "' }",
success: function (data) {
$('#<%= hdfMessageID.ClientID %>').val(id);
$('#<%= ltlMessages.ClientID %>').html(data.d);
},
error: function (data) {
showError(data.responseText);
}
});
}

Since your list items are dynamic, you should delegate the event from the ol.
$(document).ready(function () {
$("#messages").delegate("li","click",function () {
getMessage(this.id);
});
});
The error you are getting ReferenceError: getMessage not defined shouldn't happen with the given code.