Sending data from the View to the Controller in a Razor MVC3 application involves passing a model along with

Within my view, there's a form representing my View model with multiple fields. I aim to generate a list of links for pagination purposes that will not only redirect to a specific page but also send the input data from the form along with it. The JavaScript snippet below showcases the function used to handle this functionality when bound to the page links as an OnClick action:

function SearchCriteria() {
    this.OrderNumber = "";
    this.CustomerNumber = "";
    this.FirstName = "";
    this.LastName = "";
    this.Login = "";
    this.Company = "";
    this.Country = "";

}

function sendModel(page) {

    var myModel = new SearchCriteria();

    var PostData = JSON.stringify(myModel);
    $.post('@Url.Action("ShowCustomers","Home")', PostData);

}

An issue arises where clicking on any of the page numbers results in no action. It seems like the script isn't being triggered at all.

The code responsible for binding the 'sendModel' function to the links is presented below:

<a class="@(i == ViewBag.CurrentPage ? "current" : "")" onclick="sendModel(@i)" href="#">@(innerContent ?? i.ToString())</a> 

This particular piece of code is embedded within a loop designated for each respective page, hence why "i" correlates to the page corresponding to the link being generated.

Answer №1

Your current setup sends the values to the ShowCustomers action method, but doesn't do anything with the results.

If the ShowCustomers() function returns JSON or HTML, you'll need to make sure to display that information:

$.post('@Url.Action("ShowCustomers","Home")', PostData,
      function(data)
      {
        $('#displayResults') = data;
      });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for displaying a specific PDF file using the selected programming language

As a newcomer to react.js, I have a question regarding my system which allows the user to select the default language. If the chosen language is French, there is a specific URL that needs to be included in the Iframe path. For Spanish, it's a specific ...

Typescript - type assertion does not throw an error for an invalid value

When assigning a boolean for the key, I have to use a type assertion for the variable 'day' to avoid any errors. I don't simply do const day: Day = 2 because the value I receive is a string (dynamic value), and a type assertion is necessary ...

Is there a way to execute a JavaScript function on a webpage using Selenium automation?

Here's an element on a website: <span class="log-out-ico" ng-click="logout()"> Instead of clicking it, I want to run the "logout()" script from selenium. Is that possible? If so, how can I do it? This is what I attempted: I ...

Loading Ajax image while rendering partial views in MVC 3

Recently, I've been using Html.RenderPartial(usercontrol, model) to display my user controls. I'm wondering if there's a way to enhance this functionality by incorporating an Ajax loading image while the partial view loads? UPDATE: Attempte ...

Unable to interact with a button through JavaScript using execute_script in Selenium

https://i.stack.imgur.com/hJmtK.png I am attempting to remove a cookies popup by accepting the cookies and clicking confirm. While I am able to click an input labeled "zgadzam się na", for some reason, clicking a button with the label "potwierdź" appears ...

In a jQuery conditional statement, selecting the second child of the li element for targeting

I'm encountering an issue where I can't target the second child of an li element and use it in a conditional statement. Are jQuery conditionals not compatible with li:nth-child(2)? if($(".steps ul li:first-child").attr('aria-selected') ...

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

Verify the presence of values in several textarea fields with jQuery before executing a specified action

My main goal is to validate multiple dynamic forms on a single page. If all textareas are either empty or contain default values, I need a specific function to be executed. However, if any of the textareas have content that deviates from the default value, ...

Setting the color of an element using CSS based on another element's style

I currently have several html elements embedded within my webpage, such as: <section id="top-bar"> <!-- html content --> </section> <section id="header"> <!-- html content --> </section> <div id="left"> &l ...

Upon upgrading kombu, an issue has arisen where the task_id is not JSON serializable

After upgrading, I encountered an ERROR EncodeError(TypeError('6JQAKHNMG9 is not JSON serializable',),). The following packages were successfully installed: amqp-2.1.4 billiard-3.5.0.2 celery-4.0.2 kombu-4.0.2 pytz-2017.2 (These were i ...

What is the process of encoding JSON in PHP using jQuery Ajax to send post data?

I created an HTML form to submit data to a PHP file upon hitting the submit button. $.ajax({ url: "text.php", type: "POST", data: { amount: amount, firstName: firstName, lastName: lastName, email: email }, ...

How come an element retrieved with getElementById in Next.js comes back as null despite the presence of a defined document?

Having trouble using SSR in my React/Next app. Despite having the document present (and being able to visually see the div with the id plTable), the getElementById function is returning null. I even tried calling getElementById after 6 seconds to ensure ...

The API Key containing a colon is causing a TypeError when trying to parse it because forEach is not recognized as a function

Trying to utilize the New York Times API to fetch the Top Stories in JSON, I am encountering an issue: Uncaught TypeError: top.forEach is not a function Suspecting that the problem lies with the API key containing colons in the URL, I attempted encoding ...

When trying to use setInterval () after using clearInterval () within an onclick event, the functionality seems

Can anyone assist me with an issue I am encountering while using the setInterval() function and then trying to clear it with clearInterval()? The clearInterval() works fine, but the automatic functionality of li elements with a specific class suddenly stop ...

Anomalous Link Behavior on iOS

I am encountering a strange issue with links on the provided website in iOS: When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so. H ...

Vue.js filters items based on their property being less than or equal to the input value

I'm currently working on a project in vue.js where I need to filter elements of an object based on a specific condition. I want to only return items where maxPeoples are greater than or equal to the input value. Below is a snippet of my code: model ...

Display alert only when focus is lost (on blur) and a dropdown selection was not made

Utilizing Google Maps Places for autocompletion of my input, I am aiming to nudge the user towards selecting an address from the provided dropdowns in order to work with the chosen place. A challenge arises when considering enabling users to input address ...

Stop the stream coming from getUserMedia

After successfully channeling the stream from getUserMedia to a <video> element on the HTML page, I am able to view the video in that element. However, I have encountered an issue where if I pause the video using the controls on the video element a ...

Extract the chosen document from an input within the Electron application form

Need help with this form <form> <input type="file" name="idp" id="idp" onchange="uploadFiles();"/> </form> Once a user selects an image, I want to move it to a specific folder and save its full name in a variable for database storage. ...

Is all of the app fetched by Next.js when the initial request is sent?

After doing some research online, I learned that Next.js utilizes client-side routing. This means that when you make the first request, all pages are fetched from the server. Subsequent requests will render those pages in the browser without needing to com ...