diff --git a/src/Discussion.Web/Views/Topic/Index.cshtml b/src/Discussion.Web/Views/Topic/Index.cshtml
index f444981b..62ccb13b 100644
--- a/src/Discussion.Web/Views/Topic/Index.cshtml
+++ b/src/Discussion.Web/Views/Topic/Index.cshtml
@@ -6,13 +6,6 @@
 
 @{
     ViewData["Title"] = Model.Topic.Title;
-    
-    var user = Context.DiscussionUser();
-    var canCreateReply = user != null;
-    if (canCreateReply && SiteSettings.RequireUserPhoneNumberVerified && !user.PhoneNumberId.HasValue)
-    {
-        canCreateReply = false;
-    }
 }
 
 <div class="row">
@@ -43,133 +36,32 @@
 
 @if (Model.Topic.ReplyCount > 0)
 {
-    <div class="row">
-        <div class="panel no-padding panel-topic-replies col-xs-12 col-sm-12 col-md-12 col-lg-12">
-            <div class="panel-heading">
-                共有 @Model.Topic.ReplyCount 条回复
-            </div>
-
-            <div class="panel-body">
-                @foreach (var reply in Model.Replies)
-                {
-                    <div class="reply-item">
-                        <dl class="reply-author">
-                            <dd><img src="@AvatarService.GetUserAvatarUrl(reply.Author)" class="avatar"/></dd>
-                            <dd class="username">@reply.Author.DisplayName</dd>
-                        </dl>
-                        <div class="reply-content">
-                            <div class="reply-content-body">@Html.RenderMarkdown(reply.Content, maxHeadingLevel: 3)</div>
-                            <div class="reply-content-related">
-                                回复于 <span class="replied-at" data-replied-at="@Html.Timestamp(reply.CreatedAtUtc)"></span>
-                            </div>
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </div>
+    <partial name="./Partial/_ReplyList.cshtml" for="@Model" />
 }
 
 @if (Context.IsAuthenticated())
 {
-    <div class="row">
-        <div class="panel no-padding panel-topic-create-reply col-xs-12 col-sm-12 col-md-12 col-lg-12">
-            <div class="panel-heading">
-                添加回复
-            </div>
-
-            <div class="panel-body">
-                @if (canCreateReply)
-                {
-                    <ul class="nav nav-tabs" role="tablist">
-                        <li role="presentation" class="active"><a id="tab-editor" href="#editor" aria-controls="home" role="tab" data-toggle="tab">编辑</a></li>
-                        <li role="presentation"><a id="tab-preview" href="#preview" aria-controls="profile" role="tab" data-toggle="tab">预览</a></li>
-                    </ul>
-                    <div class="tab-content">
-                        <div role="tabpanel" class="tab-pane active" id="editor">
-                            <textarea id="content-editor" placeholder="回复话题（支持 Markdown 语法）"></textarea>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="preview"></div>
-                    </div>
-                    <button id="submit-create" class="btn btn-default submit-create-btn">回复</button>
-                }
-                else
-                {
-                    <p>多谢登录。</p>
-                    <p>为账号验证了实名手机号之后，才可以添加回复。@Html.ActionLink("现在验证", "VerifyPhoneNumber", "User") </p>
-                }
-            </div>
-        </div>
-    </div>
+    <partial name="./Partial/_NewReply.cshtml" for="@Model" />
 }
 
 @section Tail{
     <script>
         $(document).ready(function() {
-            window.DiscussionApp.utils.transformTimestampOn('.created-at-time', 'data-created-at');
-            window.DiscussionApp.utils.transformTimestampOn('.replied-at', 'data-replied-at');
-
-
-            $("#submit-create").on("click",
-                function() {
-                    var editor = $("#content-editor");
-                    var replyContent = editor.val();
-                    if (!$.trim(replyContent)) {
-                        editor.focus();
-                        return false;
-                    }
-
-                    var topicId = parseInt('@Model.Id');
-                    var postUrl = '/topics/' + topicId + '/replies';
-                    $.ajax({
-                        url: postUrl,
-                        method: 'POST',
-                        data: { content: replyContent, __RequestVerificationToken: window.__RequestVerificationToken },
-                        // contentType: 'json',
-                        dataType: 'json',
-                        success: function() {
-                            location.reload();
-                        },
-                        error: function(xhr) {
-                            var errors = JSON.parse(xhr.responseText);
-                            // Object.values(errors);  // [], [], []
-                        }
-                    });
-                });
-
-            $('#tab-preview').on('shown.bs.tab',
-                function(e) {
-                    var editor = $("#content-editor");
-                    var replyContent = editor.val();
-                    if (!$.trim(replyContent)) {
-                        editor.focus();
-                        e.preventDefault();
-                        return false;
-                    }
-
-                    $('#preview').html('正在加载预览...');
-                    $.ajax({
-                        url: '/api/common/md2html?maxHeadingLevel=3',
-                        method: 'POST',
-                        data: { markdown: replyContent, __RequestVerificationToken: window.__RequestVerificationToken },
-                        success: function(res) {
-                            if (res.hasSucceeded) {
-                                $('#preview').html(res.result.html);
-                            } else {
-                                $('#preview').html('<span style="color:red">' + res.errorMessage + '</span>');
-                            }
-                        },
-                        error: function() {
-                            $('#preview').html('暂时无法预览');
-                        }
-                    });
-                });
+            var replyUrl = '/topics/' + parseInt('@Model.Id') + '/replies';
+            var previewApi = '/api/common/md2html?maxHeadingLevel=3';
+            var app = window.DiscussionApp;
+            var previewSelectors = {
+                tabPreview: '#tab-preview',
+                tabEditor: '#tab-editor',
+                contentPreview: '#preview',
+                contentEditor: '#content-editor'
+            };
+            
+            app.utils.transformTimestampOn('.created-at-time', 'data-created-at');
+            app.utils.transformTimestampOn('.replied-at', 'data-replied-at');
 
-            $('#tab-editor').on('shown.bs.tab',
-                function() {
-                    $("#content-editor").focus();
-                    $('#preview').empty();
-                });
+            $("#submit-create").click(app.topic.submitNewReply("#content-editor", replyUrl));
+            app.topic.setupReplyPreview(previewSelectors, previewApi);
         });
     </script>
 }
\ No newline at end of file
diff --git a/src/Discussion.Web/Views/Topic/Partial/_NewReply.cshtml b/src/Discussion.Web/Views/Topic/Partial/_NewReply.cshtml
new file mode 100644
index 00000000..60ed8a11
--- /dev/null
+++ b/src/Discussion.Web/Views/Topic/Partial/_NewReply.cshtml
@@ -0,0 +1,46 @@
+@using Discussion.Core.Mvc
+@using Discussion.Web.Services.UserManagement.Avatar
+@inject Discussion.Web.Models.SiteSettings SiteSettings
+@inject IUserAvatarService AvatarService
+@model TopicViewModel
+
+@{
+    var user = Context.DiscussionUser();
+    var canCreateReply = user != null;
+    if (canCreateReply && SiteSettings.RequireUserPhoneNumberVerified && !user.PhoneNumberId.HasValue)
+    {
+        canCreateReply = false;
+    }
+}
+
+
+
+<div class="row">
+    <div class="panel no-padding panel-topic-create-reply col-xs-12 col-sm-12 col-md-12 col-lg-12">
+        <div class="panel-heading">
+            添加回复
+        </div>
+
+        <div class="panel-body">
+            @if (canCreateReply)
+            {
+                <ul class="nav nav-tabs" role="tablist">
+                    <li role="presentation" class="active"><a id="tab-editor" href="#editor" aria-controls="home" role="tab" data-toggle="tab">编辑</a></li>
+                    <li role="presentation"><a id="tab-preview" href="#preview" aria-controls="profile" role="tab" data-toggle="tab">预览</a></li>
+                </ul>
+                <div class="tab-content">
+                    <div role="tabpanel" class="tab-pane active" id="editor">
+                        <textarea id="content-editor" placeholder="回复话题（支持 Markdown 语法）"></textarea>
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="preview"></div>
+                </div>
+                <button id="submit-create" class="btn btn-default submit-create-btn">回复</button>
+            }
+            else
+            {
+                <p>多谢登录。</p>
+                <p>为账号验证了实名手机号之后，才可以添加回复。@Html.ActionLink("现在验证", "VerifyPhoneNumber", "User") </p>
+            }
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Discussion.Web/Views/Topic/Partial/_ReplyList.cshtml b/src/Discussion.Web/Views/Topic/Partial/_ReplyList.cshtml
new file mode 100644
index 00000000..e5ef624e
--- /dev/null
+++ b/src/Discussion.Web/Views/Topic/Partial/_ReplyList.cshtml
@@ -0,0 +1,29 @@
+@using Discussion.Web.Services.UserManagement.Avatar
+@inject IUserAvatarService AvatarService
+@model TopicViewModel
+
+<div class="row">
+    <div class="panel no-padding panel-topic-replies col-xs-12 col-sm-12 col-md-12 col-lg-12">
+        <div class="panel-heading">
+            共有 @Model.Topic.ReplyCount 条回复
+        </div>
+
+        <div class="panel-body">
+            @foreach (var reply in Model.Replies)
+            {
+                <div class="reply-item">
+                    <dl class="reply-author">
+                        <dd><img src="@AvatarService.GetUserAvatarUrl(reply.Author)" class="avatar"/></dd>
+                        <dd class="username">@reply.Author.DisplayName</dd>
+                    </dl>
+                    <div class="reply-content">
+                        <div class="reply-content-body">@Html.RenderMarkdown(reply.Content, maxHeadingLevel: 3)</div>
+                        <div class="reply-content-related">
+                            回复于 <span class="replied-at" data-replied-at="@Html.Timestamp(reply.CreatedAtUtc)"></span>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+</div>
diff --git a/src/Discussion.Web/wwwroot/scripts/_entry-js.js b/src/Discussion.Web/wwwroot/scripts/_entry-js.js
index 6a62349b..d99876a1 100644
--- a/src/Discussion.Web/wwwroot/scripts/_entry-js.js
+++ b/src/Discussion.Web/wwwroot/scripts/_entry-js.js
@@ -11,7 +11,8 @@ import '../lib/node_modules/prismjs';
 
 import * as utils from './functions'
 import * as mdeditor from './markdown-editor'
+import * as topic from './topic'
 
 
 window.jQuery = window.$ = jQuery;
-window.DiscussionApp = { utils, mdeditor  };
+window.DiscussionApp = { utils, mdeditor, topic  };
diff --git a/src/Discussion.Web/wwwroot/scripts/topic.js b/src/Discussion.Web/wwwroot/scripts/topic.js
new file mode 100644
index 00000000..874c1656
--- /dev/null
+++ b/src/Discussion.Web/wwwroot/scripts/topic.js
@@ -0,0 +1,69 @@
+
+
+export function submitNewReply(editorSelector, postUrl) {
+    return function() {
+        var editor = $(editorSelector);
+        var replyContent = editor.val();
+        if (!$.trim(replyContent)) {
+            editor.focus();
+            return false;
+        }
+
+        $.ajax({
+            url: postUrl,
+            method: 'POST',
+            data: {
+                content: replyContent,
+                __RequestVerificationToken: window.__RequestVerificationToken
+            },
+            dataType: 'json',
+            success: function() {
+                location.reload();
+            },
+            error: function(xhr) {
+                var errors = JSON.parse(xhr.responseText);
+                console.log(errors);
+            }
+        });
+    };
+}
+
+
+export function setupReplyPreview(selectors, previewApiUrl){
+
+    $(selectors.tabPreview).on('shown.bs.tab',
+        function(e) {
+            var editor = $(selectors.contentEditor);
+            var replyContent = editor.val();
+            if (!$.trim(replyContent)) {
+                editor.focus();
+                e.preventDefault();
+                return false;
+            }
+
+            $(selectors.contentPreview).html('正在加载预览...');
+            $.ajax({
+                url: previewApiUrl,
+                method: 'POST',
+                data: { 
+                    markdown: replyContent, 
+                    __RequestVerificationToken: window.__RequestVerificationToken },
+                success: function(res) {
+                    if (res.hasSucceeded) {
+                        $(selectors.contentPreview).html(res.result.html);
+                    } else {
+                        $(selectors.contentPreview).html('<span style="color:red">' + res.errorMessage + '</span>');
+                    }
+                },
+                error: function() {
+                    $(selectors.contentPreview).html('<span style="color:red">暂时无法预览</span>');
+                }
+            });
+        });
+
+    $(selectors.tabEditor).on('shown.bs.tab',
+        function() {
+            $(selectors.contentEditor).focus();
+            $(selectors.contentPreview).empty();
+        });
+}
\ No newline at end of file