Javascript ASP.NET MVC:使用jQuery更改输入文本值
我有一个引导模式,当你点击它时,它会显示Gallery的图像。我希望通过单击每个图像来更改输入值,并将它们的Url放在输入文本上,以便提交。但它不起作用,输入文本的值也不会改变。为什么?Javascript ASP.NET MVC:使用jQuery更改输入文本值,javascript,jquery,asp.net-mvc,asp.net-mvc-3,twitter-bootstrap-3,Javascript,Jquery,Asp.net Mvc,Asp.net Mvc 3,Twitter Bootstrap 3,我有一个引导模式,当你点击它时,它会显示Gallery的图像。我希望通过单击每个图像来更改输入值,并将它们的Url放在输入文本上,以便提交。但它不起作用,输入文本的值也不会改变。为什么? @model IEnumerable<tourism.Models.Gallery> <input type="text" name="imgUrl" id="index-img" style="width: 100%;" value="url" /> <di
@model IEnumerable<tourism.Models.Gallery>
<input type="text" name="imgUrl" id="index-img" style="width: 100%;" value="url" />
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Choose Image</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Gallery</h4>
</div>
<div class="modal-body">
<div class="row">
@foreach (var item in Model)
{
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" onclick="(function () { ('input[name=imgUrl]').val()=@Html.DisplayFor(modelItem => item.Url); })()" class="close" data-dismiss="modal"><img src="@Html.DisplayFor(modelItem => item.Url)" class="thumbnail img-responsive" alt="@Html.DisplayFor(modelItem => item.Alt)"></a>
</div>
}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
@model IEnumerable
选择图像
&时代;
画廊
@foreach(模型中的var项目)
{
}
接近
用于将Url从模型传递到输入文本的jQuery代码(来自上面的代码):
更改链接,为项目url添加
数据-
值(删除onclick=…
)
做得好。谢谢你,先生。你们有学习jquery的好资料吗?对不起,“数据url”在这里的作用是什么?我首先要了解一下。最好的站点IMO是Html
data-
属性是向Html元素添加任意数据的一种方式(请参阅jquery文档)。在这种情况下,它将对象Url
属性的值存储到名为Url
的data
属性中,然后可以使用.data('Url')
检索该属性。你可以储存任何你想要的东西
<a href="#" onclick="(function () { ('input[name=imgUrl]').val()=@Html.DisplayFor(modelItem => item.Url); })()" class="close" data-dismiss="modal"><img src="@Html.DisplayFor(modelItem => item.Url)" class="thumbnail img-responsive" alt="@Html.DisplayFor(modelItem => item.Alt)"></a>
<a href="#" data-url="@item.Url" class="image" .... >
$('.image').click(function() {
$('#index-img').val($(this).data('url'));
});