如何使用Ajax满足以下要求 [英] How to use Ajax for the below requirement

问题描述

嗨..
我的项目中有一个如下要求:
我应该将表中指定列的所有值都放入下拉列表中，并且在该下拉列表中选择不同的值时，文本框的值应该更改.文本框上的值将来自同一表.

我需要为此使用AJAX吗?如果是，那么让我知道如何使用，就像我之前从未使用过AJAX一样.

Hi..
I have a requirement in my project which is something like this:
I am supposed to bring all the values of a specified column from a table into my drop down and on selection of different values in that drop down the values of the text box should change. The value on text box will come from the same table .

DO i need to use AJAX for this? If yes then let me know how to use as in I have never used AJAX before this.
Is there any other way to get that?

推荐答案

Ajax只是一种花哨的奢侈品，可以用来减少流量.永远不需要Ajax，也不应该忽略Ajax，因为在大多数情况下，它也很有用.

您遇到的问题是，当用户从下拉列表中选择一个值时，您想查看记录(在HTML语言中，这是一个select元素). Ajax只能帮助您下载部分内容，而不是重新下载整个冗余HTML DOM.在此之上，a​​jax没有什么可做的.

注意事项如下，

1.当用户在下拉列表中更改值时，
2.从服务器加载该记录的数据.
3.更新DOM以预览记录详细信息.

我将向您展示操作方法的示例.

首先，您需要处理select元素的change事件，即更新值时引发的事件.

在ASP.NET的视图HTML中，您可以这样做

Ajax is just a fancy luxury that you can use to cut-short the traffic. Ajax is never required, nor should be ignored as in most cases it is helpful also.

The problem you are having is that you want to view the records when user selects a value from the dropdown (in HTML language it is a select element). Ajax can only help you to download a portion of the content, rather than re-downloading the entire redundant HTML DOM. There is nothing that ajax does above that.

The considerations are as,

1. When user changes the value in the dropdown,
2. Load the data from server for that record.
3. Update the DOM for previewing the record details.

I will show you an example of how-to about this.

First of all you need to handle the select element''s change event, the event that gets raised when you update the value.

In ASP.NET''s view HTML you do it this way

<select id="dropdown">
@foreach (var record in Model) {
   // I suspect you know what is Model
   <option value="@record.Id">
      @record.Name
   </option>
   // Assume Model is [{Id = 1, Name = "Afzaal Ahmad Zeeshan"}, ...]
}
</select>
</select>

这将为您的记录(在模型中返回)创建一个下拉列表，现在您可以处理change事件并在示例HTML区域上显示数据.

This will create the dropdown for your records (that you returned in the Model), now you can handle the change event and show the data on the sample HTML area.

<div id="dropzone">
  <!-- This will hold the data -->  
</div>

用于处理事件的jQuery代码将在此处

The jQuery code that will handle the event will be here,

(' #dropdown' span>).change(函数(){

('#dropdown').change(function () {

.ajax({ 网址:' ajax-controller/action'， 数据:

.ajax({ url: 'ajax-controller/action', data:

这篇关于如何使用Ajax满足以下要求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！