I have an asp.net mvc project. I am getting some questions and answers for questions from database by ajax get. My query takes too long. How can i edit my code to work faster?
I am storing my questions and answers seperate tables. Each answer is related questions by ids.
Thanks for answers.
My view:
$.ajax({//GET QUESTIONS
url: '#Url.Action("GetQuestionsBySubCategory", "Order")',
type: "GET",
data: { subcattext : selectedSubCategory },
success: function (result) {
$('<div class=\"form-group\" id=\"sorularform\" ><input name=\"altcat\" value=\"' + selectedSubCategory + '\" type=\"hidden\">').prependTo("#sorular");
// loop each question
for (var i = 0; i < result.length; i++) {
//IF QUESTION 1 START
if (result[i].QuestionType == 1) {
$('<label for=\"exampleFormControlSelect' + i + '\" > ' + result[i].Description + '</label ><select name=\"' + result[i].Description + ' \" class=\"form-control\" id=\"exampleFormControlSelect' + result[i].Id + '\"></select>').appendTo("#sorularform");
var questionid;
$.ajax({//GET ANSWERS
url: '#Url.Action("GetAnswersByQuestionId", "Order")',
type: "GET",
data: { questionid: result[i].Id },
success: function (answerresult) {
for (var a = 0; a < answerresult.length; a++) {
$('<option>' + answerresult[a].Description + '</option>').prependTo("#exampleFormControlSelect" + answerresult[a].Question_Id);
}
},
error: function (err) {
// the call thrown an error
console.log("Hata Oluştu")
},
complete: function () {
//$(".loading").hide();
}
});
};
}
},
error: function (err) {
// the call thrown an error
console.log("Hata Oluştu")
},
complete: function () {
//$(".loading").hide();
$("</div>").appendTo(".form-group");
$('#yersec').insertBefore('#sorularform');
//$('#sorular').html(table);
}
});
Controller.cs
public ActionResult GetQuestionsBySubCategory(string subcattext)
{
var subcatid = subCategoryServices.GetAll().Where(x => x.Title == subcattext).FirstOrDefault().Id;
IEnumerable<QuestionVM> questionList = questionServices.GetAll().Where(x => x.SubCategory_Id == subcatid);
return Json(questionList, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult GetAnswersByQuestionId(int questionid)
{
IEnumerable<AnswerVM> answerList = answerServices.GetAll().Where(x => x.Question_Id == questionid);
return Json(answerList, JsonRequestBehavior.AllowGet);
}
If you want to make your querying faster, I would recommend Dapper. Dapper is a lightweight ORM that runs almost as fast as native SQL. There is a good tutorial that I would recommend you reading here: https://www.c-sharpcorner.com/article/asp-net-mvc-crud-with-dapper-micro-orm/
Essentially, you'll be running queries like this (this isn't exact but it's very close to the Dapper syntax without seeing your database structure or the rest of your code):
public ActionResult GetQuestionsBySubCategory(string subcattext)
{
var subcatid = db.Query("SELECT Id from SubcategoryServices WHERE Title = #title", new { title = subcattext });
IEnumerable<QuestionVM> questionList = db.Query("SELECT * FROM QuestionServices WHERE SubCategory_Id = #subcategoryId", new { subcategoryId = subcatid });
return Json(questionList, JsonRequestBehavior.AllowGet);
}
Aside - your DOM manipulation is very slow too, so that could also be making your application slower too. The technical reason is because the DOM has to re-render itself once you append elements to it. Rendering takes time.
It is out of the scope to create your whole application here, but I would strongly recommend at ReactJs or Vue as front-end libraries to create faster frontend code.
Related
I have a simple page with an input text-box. The text box is bound to jquery ui autocomplete that makes an AJAX call to the server. My server side code is an ASP.NET MVC site. The only difference I have as compared to most examples found over the Internet is that my Server side code returns a PartialView (html code) as results instead of JSON. I see the AJAX call happening and I see the HTML response in the AJAX success event as well.
My question is how do I bind this HTML data to show in the AutoComplete?
The code I have so far is:
$("#quick_search_text").autocomplete({
minLength: 3,
html: true,
autoFocus: true,
source: function (request, response) {
$.ajax({
type: "POST",
url: "serversideurl",
data: "{ 'SearchTerm': '" + request.term + "', 'SearchCategory': '" + $("#quick_search_category").val() + "' }",
contentType: "application/json; charset=utf-8",
dataType: "html",
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
},
success: function (data) {
//THIS IS WHERE MY HTML IS RETURNED FROM SERVER SIDE
//HOW DO I BIND THIS TO JQUERY UI AUTOCOMPLETE
}
});
},
select: function (event, ui) {
},
response: function (event, ui) {
console.log(ui);
console.log(event);
}
});
This works:
1) Create an action in your controller and set the RouteConfig to start this action
public class HomeController : Controller
{
public ActionResult Index20()
{
MyViewModel m = new MyViewModel();
return View(m);
}
Create a view without any type of master page
Add this view model:
public class MyViewModel
{
public string SourceCaseNumber { get; set; }
}
Go to Manage Nuget Packages or PM Console and add to MVC 5 project - Typeahead.js for MVC 5 Models by Tim Wilson
Change the namespace for the added HtmlHelpers.cs to System.Web.Mvc.Html and rebuild
Add this class:
public class CasesNorm
{
public string SCN { get; set; }
}
Add these methods to your controller:
private List<Autocomplete> _AutocompleteSourceCaseNumber(string query)
{
List<Autocomplete> sourceCaseNumbers = new List<Autocomplete>();
try
{
//You will goto your Database for CasesNorm, but if will doit shorthand here
//var results = db.CasesNorms.Where(p => p.SourceCaseNumber.Contains(query)).
// GroupBy(item => new { SCN = item.SourceCaseNumber }).
// Select(group => new { SCN = group.Key.SCN }).
// OrderBy(item => item.SCN).
// Take(10).ToList(); //take 10 is important
CasesNorm c1 = new CasesNorm { SCN = "11111111"};
CasesNorm c2 = new CasesNorm { SCN = "22222222"};
IList<CasesNorm> aList = new List<CasesNorm>();
aList.Add(c1);
aList.Add(c2);
var results = aList;
foreach (var r in results)
{
// create objects
Autocomplete sourceCaseNumber = new Autocomplete();
sourceCaseNumber.Name = string.Format("{0}", r.SCN);
sourceCaseNumber.Id = Int32.Parse(r.SCN);
sourceCaseNumbers.Add(sourceCaseNumber);
}
}
catch (EntityCommandExecutionException eceex)
{
if (eceex.InnerException != null)
{
throw eceex.InnerException;
}
throw;
}
catch
{
throw;
}
return sourceCaseNumbers;
}
public ActionResult AutocompleteSourceCaseNumber(string query)
{
return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet);
}
credit goes to http://timdwilson.github.io/typeahead-mvc-model/
I'm saving some objects into tables on my Parse Data. But I need to add a constraint or make sure that the data i'm trying to insert is unique. I'm using something like the following code. But i want to guarantee that the eventId (that I'm getting from facebook API) is unique in my tables, so i don't have any redundant information. What is the best way to make it work?
var Event = Parse.Object.extend("Event");
var event = new Event();
event.set("eventId", id);
event.set("eventName", name);
event.save(null, {
success: function(event) {
console.log('New object created with objectId: ' + event.eventId);
},
error: function(event, error) {
console.log('Failed to create new object, with error code: ' + error.message);
}
});
Update:
I'm calling it inside a httpRequest. The following is pretty much what I have and I cant figure out just how to call a beforeSave inside it.
Parse.Cloud.define("hello", function(request, response) {
var query = new Parse.Query("Location");
query.find({
success: function(results) {
console.log(results);
var totalResults = results.length;
var completedResults = 0;
var completion = function() {
response.success("Finished");
};
for (var i = 0; i < totalResults; ++i){
locationId = results[i].get("locationFbId");
Parse.Cloud.httpRequest({
url: 'https://graph.facebook.com/v2.2/'+locationId+'/events?access_token='+accessToken,
success: function(httpResponse) {
console.log(httpResponse.data);
console.log("dsa"+locationId);
for (var key in httpResponse.data) {
var obj = httpResponse.data[key];
for (var prop in obj) {
var eventObj = obj[prop];
if (typeof(eventObj) === 'object' && eventObj.hasOwnProperty("id")) {
var FbEvent = Parse.Object.extend("FbEvent");
var fbEvent = new FbEvent();
fbEvent.set("startDate",eventObj["start_time"]);
fbEvent.set("locationFbId", locationId);
fbEvent.set("fbEventId", eventObj["id"]);
fbEvent.set("fbEventName", eventObj["name"]);
Parse.Cloud.beforeSave("FbEvent", function(request, response) {
var query = new Parse.Query("FbEvent");
query.equalTo("fbEventId", request.params.fbEventId);
query.count({
success: function(number) {
if(number>0){
response.error("Event not unique");
} else {
response.success();
}
},
error: function(error) {
response.error(error);
}
});
});
}
}
}
completedResults++;
if (completedResults == totalResults) {
completion();
}
},
error:function(httpResponse){
completedResults++;
if (completedResults == totalResults)
response.error("Failed to login");
}
});
}
},
error: function() {
response.error("Failed on getting locationId");
}
});
});
So this is occurring in Cloud Code correct? (Im assuming since this is Javascript)
What you could do is create a function that occurs before each "Event" object is saved and run a query to make sure that the event is unique (query based off of "eventId" key, not objectId since the id comes from Facebook). If the event is unique, return response.success(), otherwise return response.error("Event not unique")
EX:
Parse.Cloud.beforeSave("Event", function(request, response) {
if(request.object.dirty("eventId")){
var query = var new Parse.Query("Event");
query.equalTo("eventId", request.object.eventId);
query.count({
success: function(number) {
if(number>0){
response.error("Event not unique");
} else {
response.success();
}
},
error: function(error) {
response.error(error);
}
});
} else {
response.success();
}
});
Parse.Cloud.define("hello", function(request, response) {
var query = new Parse.Query("Location");
query.find({
success: function(results) {
console.log(results);
var totalResults = results.length;
var completedResults = 0;
var completion = function() {
response.success("Finished");
};
for (var i = 0; i < totalResults; ++i){
locationId = results[i].get("locationFbId");
Parse.Cloud.httpRequest({
url: 'https://graph.facebook.com/v2.2/'+locationId+'/events?access_token='+accessToken,
success: function(httpResponse) {
console.log(httpResponse.data);
console.log("dsa"+locationId);
for (var key in httpResponse.data) {
var obj = httpResponse.data[key];
for (var prop in obj) {
var eventObj = obj[prop];
if (typeof(eventObj) === 'object' && eventObj.hasOwnProperty("id")) {
var FbEvent = Parse.Object.extend("FbEvent");
var fbEvent = new FbEvent();
fbEvent.set("startDate",eventObj["start_time"]);
fbEvent.set("locationFbId", locationId);
fbEvent.set("fbEventId", eventObj["id"]);
fbEvent.set("fbEventName", eventObj["name"]);
// Our beforeSave function is automatically called here when we save it (this will happen every time we save, so we could even upgrade our method as shown in its definition above)
fbEvent.save(null, {
success: function(event) {
console.log('New object created with objectId: ' + event.eventId);
},
error: function(event, error) {
console.log('Failed to create new object, with error code: ' + error.message);
}
});
}
}
}
completedResults++;
if (completedResults == totalResults) {
completion();
}
},
error:function(httpResponse){
completedResults++;
if (completedResults == totalResults)
response.error("Failed to login");
}
});
}
},
error: function() {
response.error("Failed on getting locationId");
}
});
});
This can also be accomplished before ever calling the save by querying and only saving if the query returns with a number == 0.
Summary: For those joining later, what we are doing here is checking to see if an object is unique (this time based on key eventId, but we could use any key) by overriding Parse's beforeSave function. This does mean that when we save our objects (for the first time) we need to be extra sure we have logic to handle the error that the object is not unique. Otherwise this could break the user experience (you should have error handling that doesn't break the user experience anyway though).
I am trying to submit a form using ajax and want to check to see if the
correct values are sent. How do I do it using the following. Currently, it is sending it to a MVC controller, but I do not want to do that. Is there a way to just sent to the same view page and show all the values???
$(document).ready(function () {
$("#btnSubmit").click(sendValues);
});
function sendValues() {
var a = store.data.items;
var array = new Array();
for (var i = 0; i < store.data.items.length; i++) {
array[i] = store.data.items[i].data;
}
for (var i = 0; i < array.length; i++) {
if (array[i].value == "Using") {
array[i].value = true;
}
else {
array[i].value = false;
}
}
var ClintJSON =
{
"Exempt": Ext.getCmp("mmrComboBox").isIndexSelected(2),
"MM1": Ext.getCmp("mmrComboBox").isIndexSelected(3),
"MM2": Ext.getCmp("mmrComboBox").isIndexSelected(4),
"MM3": Ext.getCmp("mmrComboBox").isIndexSelected(5),
"B1": Ext.getCmp("BComboBox").isIndexSelected(2),
"B2": Ext.getCmp("BComboBox").isIndexSelected(3),
"B3": Ext.getCmp("BComboBox").isIndexSelected(4)
};
$.ajax({
jsonp: null,
jsonpCallback: null,
type: 'POST',
url: '#Url.Content("~/Site/Test")',
data: "{clinsite: " + Ext.util.JSON.encode(ClintJSON) + ", List: " + `
Ext.util.JSON.encode(array) + "}",
dataType: 'json'
, contentType: 'application/json; charset=utf-8'
, success: function (data) {
if (data.success) {
showMessage('Site requirements have been updated successfully');
store.load({ params: { start: 0, limit: 52} });
} else {
showMessage('Site requirements have NOT been updated!!! ');
store.load({ params: { start: 0, limit: 50} });
}
}
});
There is one tool that I cannot recommend enough in this type of scenario, Fiddler2.
You can download it here
It enabled you to examine exactly what is passed to and from the server and you can view the data in various formats i.e. json, web form data or plain old text.
You can also use Composer to simulate http requests, which has its obvious benefits.
As a profession web applications developer, I use this tool all day every day, like I said I can't recommend it enough!!
Cheers
Baz
you can inspect the values in firefox using firebug console or in chrome tools, just press f12 and a window will open infront of your
moreover you can log the ClientJaon to the console liek
console.log(ClintJSON );
I have 2 lists in my application and the user is supposed to drag and drop items from one list to another.
When the user drops an element from one of the lists to the other list a request has to be made to the server side code to update a field in the database (SelectedForDiscussion).
This is the code in my controller:
$scope.$watch("questionsDiscuss", function (value) {
var question = $.Enumerable.From($scope.questionsDiscuss).Where(function (item) { return !item.SelectedForDiscussion }).FirstOrDefault()
if (question != undefined) {
questionSelectionService.UpdateQuestionSelectionStatus(question.Id, true)
.then(function (output) {
var question = $.Enumerable.From($scope.questionsDiscuss)
.Where(function (item) { return item.Id == output.data.questionId })
.FirstOrDefault();
var index = $.Enumerable.From($scope.questionsDiscuss).IndexOf(question);
if (question != undefined)
if (output.data.result != "success") {
$scope.questionsDiscuss.splice(index, 1);
$scope.questionsReceived.splice(0, 0, question);
}
else {
question.SelectedForDiscussion = true;
$scope.questionsDiscuss[index] = question;
}
});
}
else {
var question = $.Enumerable.From($scope.questionsReceived).Where(function (item) { return item.SelectedForDiscussion }).FirstOrDefault();
if (question != undefined) {
questionSelectionService.UpdateQuestionSelectionStatus(question.Id, false)
.then(function (output) {
var question = $.Enumerable.From($scope.questionsReceived)
.Where(function (item) { return item.Id == output.data.questionId })
.FirstOrDefault();
var index = $.Enumerable.From($scope.questionsReceived).IndexOf(question);
if (question != undefined)
if (output.data.result != "success") {
$scope.questionsReceived.splice(index, 1);
$scope.questionsDiscuss.splice(0, 0, question);
}
else {
question.SelectedForDiscussion = false;
$scope.questionsReceived[index] = question;
}
});
}
}
}, true);
I have 4 javascript breakpoint placed at the following lines within Firebug:
2 of them at the following lines:
if (question != undefined) {
One at:
var question = $.Enumerable.From($scope.questionsDiscuss)
.Where(function (item) {
return item.Id == output.data.questionId
})
.FirstOrDefault();
And the other at:
var question = $.Enumerable.From($scope.questionsReceived)
.Where(function (item) {
return item.Id == output.data.questionId
})
.FirstOrDefault();
The following happens:
The breakpoints at:
if (question != undefined) {
are always reached.
The breakpoint at
var question = $.Enumerable.From($scope.questionsDiscuss)
.Where(function (item) {
return item.Id == output.data.questionId
})
.FirstOrDefault();
is also reached.
The other is never reached.
Both responses are OK(response code 200).
Everything should work perfectly but the then clause in the second promise is never reached.
Can anyone tell me what I am doing wrong?
The serverside appplication is an ASP.NET MVC application written in C#.
Edit 1:
I figured out why this was happening and I have a work around for it. I am stil interested in an actual solution.
The problem is angularjs throws an error then swallows it when calling $http for the second time. The error is:
digest alredy in progress
I think this is because in my directive I have this code:
dndfunc = function (scope, element, attrs) {
// contains the args for this component
var args = attrs.dndBetweenList.split(',');
// contains the args for the target
var targetArgs = $('#' + args[1]).attr('dnd-between-list').split(',');
// variables used for dnd
var toUpdate;
var target;
var startIndex = -1;
// watch the model, so we always know what element
// is at a specific position
scope.$watch(args[0], function (value) {
toUpdate = value;
}, true);
// also watch for changes in the target list
scope.$watch(targetArgs[0], function (value) {
target = value;
}, true);
// use jquery to make the element sortable (dnd). This is called
// when the element is rendered
$(element[0]).sortable({
items: 'div',
start: function (event, ui) {
// on start we define where the item is dragged from
startIndex = ($(ui.item).index());
},
stop: function (event, ui) {
var newParent = ui.item[0].parentNode.id;
// on stop we determine the new index of the
// item and store it there
var newIndex = ($(ui.item).index());
var toMove = toUpdate[startIndex];
// we need to remove him from the configured model
toUpdate.splice(startIndex, 1);
if (newParent == args[1]) {
// and add it to the linked list
target.splice(newIndex, 0, toMove);
} else {
toUpdate.splice(newIndex, 0, toMove);
}
// we move items in the array, if we want
// to trigger an update in angular use $apply()
// since we're outside angulars lifecycle
scope.$apply(targetArgs[0]);
scope.$apply(args[0]);
},
connectWith: '#' + args[1]
})
}
And there are 2 calls to apply at the end which trigger a new digest cycle I think.
Anyway I fixed it by adding this call before the calls to apply:
if (scope.updateLists != undefined)
scope.updateLists();
And moved all the code from the watch into the updateLists function.
Also because people have mentioned the service as having something to do with it I am pasting the relevant code within it:
GetQuestionsReceived: function (eid, criteria, page, rows) {
var promise = this.GetQuestionsReceivedInternal(eid,criteria, page, rows).then(function (response) {
// The return value gets picked up by the then in the controller.
return response;
});
// Return the promise to the controller
return promise;
},
GetQuestionsReceivedInternal: function (eid, criteria, page, rows) {
return $http({ method: 'GET',
url: '../QuestionManagement/GetQuestions?eventId='+eid+'&page=1&rows=5&'+serialize(criteria)
}).
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
results = data;
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
if (window.console && console.log) {
console.log("Could not obtain questions received. Error:" + data + "Status:" + status + "Headers:" + headers + "Config:" + config);
}
});
},
GetQuestionsDiscuss: function (eid,criteria, page, rows) {
var promise = this.GetQuestionsDiscussInternal(eid,criteria, page, rows).then(function (response) {
// The return value gets picked up by the then in the controller.
return response;
});
// Return the promise to the controller
return promise;
},
GetQuestionsDiscussInternal: function (eid,criteria, page, rows) {
return $http({ method: 'GET',
url: '../QuestionManagement/GetQuestions?eventId=' + eid + '&page=1&rows=5&' + serialize(criteria)
}).
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
response = data;
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
if (window.console && console.log) {
console.log("Could not obtain questions received. Error:" + data + "Status:" + status + "Headers:" + headers + "Config:" + config);
}
});
},
You have two very similar blocks of code, which could be generalized and placed in a function wrapper, leaving behind a very simple calling function.
If you can get everything into that form, then I think you will find it easier to debug.
Here is an attempt to do so :
function updateSelectionStatus(qA, qB, bool) {
var en = $.Enumerable.From(qA);
var question = en.Where(function (item) {
return bool ? !item.SelectedForDiscussion : item.SelectedForDiscussion;
}).FirstOrDefault();
if(question) {
questionSelectionService.UpdateQuestionSelectionStatus(question.Id, bool).then(function (output) {
if (output.data.result == "success") {
question.SelectedForDiscussion = bool;
}
else {
qA.splice(en.IndexOf(question), 1);
qB.unshift(question);
}
});
}
return question;
}
$scope.$watch("questionsDiscuss", function (value) {
if (!updateSelectionStatus($scope.questionsDiscuss, $scope.questionsReceived, true) {
updateSelectionStatus($scope.questionsReceived, $scope.questionsDiscuss, false);
}
}, true);
I may have made some false assumptions and simplified too much (eg. purging the inner $.Enumerable.From, which appears to reselect the same question as the outer), so you may well need to rework my code.
I'm advocating a principle here, rather than offering a solution.
I am working on the MVC3 with ADO.Net Connectivity, an then i am updating the div with jQuery
Here i my code
Controller
public ActionResult GetData()
{
return this.Json(_db.MYMOVIELISTs, JsonRequestBehavior.AllowGet);
}
public void Insert(string Id)
{
var movieToInsert = new MYMOVIELIST { Title = "Ben", Director = "LEMe", ID = Id };
// Save new movie to DB
_db.AddToMYMOVIELISTs(movieToInsert);
_db.SaveChanges();
}
ClientSide
function insertCallback(result) {
readData();
}
function readData() {
info.empty();
$.ajax({
type: "GET",
url: 'Home/GetData',
async: false,
success: function (data) {
for (var i = 0; i < data.length; i++) {
var panel = $("<div class='panel' ></div>")
var d = data[i];
panel.append("ID: " + d.ID + "</br>");
panel.append("Title: " + d.Title + "</br>");
panel.append("Director: " + d.Director + "</br>");
panel.append("<hr>");
panel.data("info", d);
panel.appendTo(info);
}
}
});
}
$("#btnAdd").click(function () {
$.post("Home/Insert", $("form").serialize(), insertCallback);
});
This is works Fine, my problem is i want to update the Database table in "Save" buttom click. i tried to call the _db.SaveChanges(); in save button click instead of the Insert it is not adding the movieToInsert to table, here i want to know is how to save the database later, Here any thing am doing wrong or is there any best approach for DB connectivity
You are serializing a form, so eventually you may want below... which will bind your serialized form to the a movie model/entity:
[AcceptVerbs("POST")]
public void Insert(MovieEntity movie)
As for database practice, I recommend reading about the repository pattern and dependency injection as it pertains to ASP.NET MVC.