javascript - 当我调用 ajax 时,我的全部内容都加载到该 div 中

标签 javascript jquery ajax asp.net-mvc-4

这是我的脚本代码,通过它我通过ajax cal将数据发送到我的 Controller ,所有事情都工作正常,但问题是我的全部内容都在那个div中,我还希望在调用时启用滚动条,需要好的建议

 <script type="text/javascript">
        $(function () {
            $("#my-form").on("submit", function (e) {
                e.preventDefault();

                $.ajax({
                    url:this.action,
                    type:this.method,
                    data:$(this).serialize(),
                    success:function(data){
                        $("#result").html(data);
                    }
                });
            });
        });
    </script>

这是我应用聊天应用程序的实际 View 代码,我还希望每 10 毫秒我的页面自动刷新一次,接收端消息可以尽快被读取

<div class="col-md-7">
    <section class="panel">
        <header class="panel-heading">
            Chat <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-cog"></a>
                @*<a href="~/Views/Chat/Create.cshtml">~/Views/Chat/Create.cshtml</a>*@
                <a href="javascript:;" class="fa fa-times"></a>
            </span>
        </header>
        @using (Html.BeginForm("AllMessages","Chat",FormMethod.Post,new {id="my-form" }))
        {
            <div class="panel-body"  id="result">
                <div class="chat-conversation1" >
                    <div class="slimScrollDiv" >
                        <ul class="conversation-list" >
                            @for (int i = 0; i < msg.Count(); i++)
                            {
                                if (msg[i].sender_id == ViewBag.Reciever_id)
                                {
                                    <li class="clearfix">

                                        <div class="chat-avatar">
                                            <img src="@Url.Content("~/Content/images/" + System.IO.Path.GetFileName(ViewBag.RecieverImage))" alt="" height="50" width="40" class="img-rounded" />
                                            <i>@Html.Label(msg[i].datetime.ToString())</i>    @*time from db*@
                                        </div>
                                        <div class="conversation-text">
                                            <div class="ctext-wrap">
                                                <i> @ViewBag.RecieverName</i>
                                                <p>
                                                    @Html.Label(msg[i].messages)
                                                    </p>
                                                </div>
                                            </div>

                                        </li>
                                    }
                                    else if (msg[i].sender_id == ViewBag.SenderId)
                                    {

                                        <li class="clearfix odd" style="margin-left:10px;">
                                            <div class="chat-avatar">
                                                <img src="@Url.Content("~/Content/images/" + System.IO.Path.GetFileName(ViewBag.SenderImage))" alt="" height="50" width="40"  class="img-rounded" />
                                                <i>@Html.Label(msg[i].datetime.ToString())</i>
                                            </div>
                                            <div class="conversation-text">
                                                <div class="ctext-wrap">
                                                    <i>  @ViewBag.SenderName</i>
                                                    <p>
                                                        @Html.Label(msg[i].messages)
                                                    </p>
                                                </div>
                                            </div>

                                        </li>
                                    }
                                }
                            </ul>



                        </div>
                        <div class="row chatSendBox">
                            <div class="col-xs-10 ">
                                @Html.HiddenFor(model => model.reciever_id, new { @Value= ViewBag.Reciever_id })
                                @Html.HiddenFor(model => model.datetime, new { @Value = DateTime.Now })
                                @Html.EditorFor(model => model.messages, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter To Chat..." } })
                            </div>
                            <div class="col-xs-2 chat-send">
                                <input type="submit" value="Send" class="form-control btn btn-info" />
                            </div>
                        </div>
                    </div>
                </div>
            }
        </section>
    </div>

This is my actual page when i send message it looks like this

最佳答案

好吧,你没有发布我们真正需要的一件事:你的 Controller 操作。但是,我的猜测是您正在那里返回 View 。您需要返回 PartialView。如果用作局部 View ,则局部 View 只是局部 View 。

关于javascript - 当我调用 ajax 时,我的全部内容都加载到该 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37950062/

相关文章:

javascript - 在vuejs中设置激活以逐步添加?

javascript - 将 Content-Type header 设置为多部分?

javascript - 返回 Javascript 变量和性能

javascript - 复用ajax函数

javascript - 禁用复选框上的输入框 jquery NO onchange

javascript - 两个 html 对象(列表、输入)应生成第三个列表

javascript - AngularJS 数组值包含 HTML 标签,调用时显示不正确

jquery - 在实时搜索事件中填充选择器

javascript - 如何从 Kendo Grid 事件将参数数据传递到 mvc 中的 Controller ?

php - 共享服务器用户上传进度条的最佳解决方案