0

我试过寻找任何可能的解决方案来解决我的问题,但是迄今为止我看到的都没有。无论如何,我使用的是MVC 3,我有一个名为Add Event的表单。在该页面上,我有一个下拉列表,其中包含用户可以从中选择的位置列表。我在该下拉列表的下方有一个链接,允许用户添加新的位置。现在,我有用于在部分视图中创建新位置的文本框,下拉列表等,当我单击该链接时,它将出现在下拉列表下方。如何刷新html元素?

无论如何,我需要刷新,只需下拉列表,这样当我添加一个新的位置时,它就在列表中。现在发生的事情是,当我点击保存后,局部视图隐藏自己,我仍然需要刷新整个页面,以获得下拉列表中的新位置,然后删除我在texbox上键入的所有内容以及相同的下拉列表页。

我该如何使用javascript/ajax来做到这一点?

+0

如果我让你正确我想你只需要将新位置的数据从局部视图移动到下拉列表中,方法是使用javascript帮助添加一个新选项你这样做给我的一些代码更清楚 – Marwan

+0

你可能想添加ASP.NET标签到你的问题。 –

+0

在ajax调用的成功函数,我认为你必须添加新的位置与JavaScript的下拉列表,像amesh在那里做了数据,你应该从ajax调用返回我想你需要返回的位置名称设置到文本属性和位置的ID设置为新的选项的值属性:)说,如果你需要更多的细节只是说吧:) – Marwan

回答

0

这可以帮助你..

var opt = document.createElement("option"); 
    // Assign text and value to Option object 
    opt.text = Text; 
    opt.value = Value;   

    // Add an Option object to Drop Down 
    document.getElementById("YourDropDownID").options.add(opt,null); 
+0

谢谢,我会给这个尝试 – user1597438

+0

,如果它的工作..接受答案请.. – amesh

+0

对不起,因为我基本上有两个不同的意见(主窗体和局部视图),都使用ajax/JavaScript,我在部分视图中添加代码? – user1597438

0

使用jQuery你可以重新加载只能元素你想要的:

$( '#菜单')负载( “myServerScript.php #menu”)。 ;

http://api.jquery.com/load/

+0

我试过了,但它对我不起作用 – user1597438

0

这可以使用jQuery来完成。 我的做法就是这样。假设你有一个看起来是这样一种形式:

<form method="post" action="#"> 
    <select id="myList" name="myList"> 
     <option value="1">Value 1</option> 
     <option value="2">Value 2</option> 
    </select> 
    <input type="text" id="newValue" name="newValue" /> 
    <a href="#" id="btn">add new value</a>    
    <input type="submit" value="Submit"> 
</form> 

哪里myList中是要添加一个新值,并刷新下拉列表中,NEWVALUE是文本字段,以接受新的值被添加到下拉( myList)并且带有id btn的链接是添加按钮。您可以添加一个jQuery会是这个样子:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btn").click(function (event) { 
      event.preventDefault(); 
      $.post("/home/addvalue", { value: $("#newValue").val() }, function (result) { 
       if (result != null) { 
        $("#myList").append("<option value='" + result.id + "' selected='selected'>" + result.text + "</option>"); 
       } 
      }); 
     }); 
    }); 
</script> 

我是什么当您单击从文本框中的链接(BTN)我收集值(和只是值)上,并做到POST (表单提交)到服务器。 我猜你希望服务器给出某种答案,包括新插入的值的ID。 如果服务器发回一个新的ID,我再追加新的结果列表(并将其设置为选择一个)

在服务器端,你的代码可能是这个样子

[HttpPost] 
public JsonResult AddValue(FormCollection collection) 
{ 
    //do database inser for the new value and get the id 
    var response = new Dictionary<string, object>(); 
    response.Add("id", 3);//3 here represents that last id 
    response.Add("text", collection["value"]); //the value you sent for the new option 
    return Json(response); 
} 

您会收到POST(编辑)数据并保存到数据库。一旦保存了值,并且将新的ID保存到字典中,然后您将序列化并返回为上述JavaScript的json。 这会更新你的表单,所以当你实际点击提交myList值时将会是新的值。 希望这可以帮助(如果是,请接受答案)

+0

这种方法可以在两个不同的html页面上工作吗?我基本上有一个视图来添加事件和部分查看添加s新位置 – user1597438

+0

只要所有DOM元素(在javascript中引用的那些元素)都被脚本加载和访问。它来自哪里并不重要。 – coffeeyesplease