This is a viewer only at the moment see the article on how this works.
To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk
This is a preview from the server running through my markdig pipeline
पिछले में इस श्रृंखला में भागमैंने टिप्पणी तंत्र के लिए डाटाबेस सेट किया. इस पोस्ट में, मैं इस बात को कवर करूंगा कि कैसे टिप्पणीों को बचाना ग्राहकों के पक्ष में और AUNT को बचाने में मदद कर रहे हैं.NT कोर.
[विषय
_CommentForm.cshtml
यह एक Razrammit का नज़रिया है जिसमें एक नयी टिप्पणी जोड़ने का तरीका है । आप पहले लोड पर देख सकते हैं यह कॉल करने के लिए window.mostlylucid.comments.setup()
जो संपादक प्रारंभ करता है. यह एक सादा पाठ है जो प्रयोग करता है SimpleMDE
बढ़िया पाठ संपादन की अनुमति देने के लिए संपादक
@model Mostlylucid.Models.Comments.CommentInputModel
<div x-data="{ initializeEditor() { window.mostlylucid.comments.setup() } }"
x-init="initializeEditor()" class="max-w-none dark:prose-dark" id="commentform">
<section id="commentsection" ></section>
<input type="hidden" asp-for="BlogPostId" />
<div asp-validation-summary="All" class="text-red-500" id="validationsummary"></div>
<p class="font-body text-lg font-medium text-primary dark:text-white pb-8">Welcome @Model.Name please comment below.</p>
<div asp-validation-summary="All" class="text-red-500" id="validationsummary"></div>
<!-- Username Input -->
<div class="flex space-x-4"> <!-- Flexbox to keep Name and Email on the same line -->
<!-- Username Input -->
<label class="input input-bordered flex items-center gap-2 mb-2 dark:bg-custom-dark-bg bg-white w-1/2">
<i class='bx bx-user'></i>
<input type="text" class="grow text-black dark:text-white bg-transparent border-0"
asp-for="Name" placeholder="Name (required)" />
</label>
<!-- Email Input -->
<label class="input input-bordered flex items-center gap-2 mb-2 dark:bg-custom-dark-bg bg-white w-1/2">
<i class='bx bx-envelope'></i>
<input type="email" class="grow text-black dark:text-white bg-transparent border-0"
asp-for="Email" placeholder="Email (optional)" />
</label>
</div>
<textarea id="commenteditor" class="hidden w-full h-44 dark:bg-custom-dark-bg bg-white text-black dark:text-white rounded-2xl"></textarea>
<input type="hidden" asp-for="ParentId"></input>
<button class="btn btn-outline btn-sm mb-4" hx-action="Comment" hx-controller="Comment" hx-post hx-vals x-on:click.prevent="window.mostlylucid.comments.setValues($event)" hx-swap="outerHTML" hx-target="#commentform">Comment</button>
</div>
यहाँ हम यू.js का उपयोग करते हैं x-init
संपादक प्रारंभ करने के लिए फोन करें. यह एक सादा पाठ है जो प्रयोग करता है SimpleMDE
बढ़िया पाठ संपादन की अनुमति देने के लिए संपादक (क्योंकि क्यों नहीं:)
<div x-data="{ initializeEditor() { window.mostlylucid.comments.setup() } }"
x-init="initializeEditor()" class="max-w-none dark:prose-dark" id="commentform">
window.mostlylucid.comments.setup()
इस जीवन में comment.js
आसान संपादक के लिए जिम्मेदार है.
function setup () {
if (mostlylucid.simplemde && typeof mostlylucid.simplemde.initialize === 'function') {
mostlylucid.simplemde.initialize('commenteditor', true);
} else {
console.error("simplemde is not initialized correctly.");
}
};
यह एक सरल फंक्शन है जो कि जांच करता है यदि simplemde
वस्तु आरंभीकृत है और यदि ऐसा है initialize
इस पर फंक्शन.
टिप्पणी को सहेजने के लिए हम HMMX का उपयोग कर एक PAX करने के लिए CommentController
जो तब टिप्पणी को डाटाबेस में सहेजता है.
<button class="btn btn-outline btn-sm mb-4" hx-action="Comment" hx-controller="Comment" hx-post hx-vals x-on:click.prevent="window.mostlylucid.comments.setValues($event)" hx-swap="outerHTML" hx-target="#commentform">Comment</button>
यह उपयोग करता है एटीएम टैग सहायक पीछे ले जाने के लिए CommentController
और फिर उस आकार को नई टिप्पणी के साथ बदलता है.
तो फिर हम में हुक mostlylucid.comments.setValues($event)
जिसे हम भरने के लिए इस्तेमाल करते हैं hx-values
ट्रिअर (यह केवल सरल रूप से अद्यतन किए जाने के लिए आवश्यक है).
function setValues (evt) {
const button = evt.currentTarget;
const element = mostlylucid.simplemde.getinstance('commenteditor');
const content = element.value();
const email = document.getElementById("Email");
const name = document.getElementById("Name");
const blogPostId = document.getElementById("BlogPostId");
const parentId = document.getElementById("ParentId")
const values = {
content: content,
email: email.value,
name: name.value,
blogPostId: blogPostId.value,
parentId: parentId.value
};
button.setAttribute('hx-vals', JSON.stringify(values));
};
}
संदेश नियंत्रण save-comment
इस डाटाबेस में टिप्पणी को सहेजने के लिए क्रिया आवश्यक है. यह ब्लॉग मालिक को ई- मेल भी भेजता है जब कोई टिप्पणी जोड़ी जाती है.
[HttpPost]
[Route("save-comment")]
public async Task<IActionResult> Comment([Bind(Prefix = "")] CommentInputModel model )
{
if (!ModelState.IsValid)
{
return PartialView("_CommentForm", model);
}
var postId = model.BlogPostId;
;
var name = model.Name ?? "Anonymous";
var email = model.Email ?? "Anonymous";
var comment = model.Content;
var parentCommentId = model.ParentId;
var htmlContent= await commentService.Add(postId, parentCommentId, name, comment);
if (string.IsNullOrEmpty(htmlContent))
{
ModelState.AddModelError("Content", "Comment could not be saved");
return PartialView("_CommentForm", model);
}
var slug = await blogService.GetSlug(postId);
var url = Url.Action("Show", "Blog", new {slug }, Request.Scheme);
var commentModel = new CommentEmailModel
{
SenderEmail = email ?? "",
Comment = htmlContent,
PostUrl = url??string.Empty,
};
await sender.SendEmailAsync(commentModel);
model.Content = htmlContent;
return PartialView("_CommentResponse", model);
}
आप देखेंगे कि यह कुछ बातें करता है:
यह पोस्ट यूआरएल तब मुझे पोस्ट पर क्लिक करने देता है, यदि मैं मेरे रूप में लॉग कर रहा हूँ (जब मैं लॉग कर रहा हूँ) मेरे गूगल AHARAT बात___ यह सिर्फ मेरे गूगल आईडी के लिए जाँच करता है फिर 'घरा' गुण सेट करता है जो मुझे टिप्पणी देखने देता है और यदि आवश्यक हो तो उन्हें मिटा देता है.
तो यह हिस्सा 2, मैं कैसे टिप्पणी को बचाना है. कुछ टुकड़े अभी भी गायब हैं; थ्रेडिंग (सो आप एक टिप्पणी का जवाब दे सकते हैं), अपनी टिप्पणी की सूची और टिप्पणी रद्द कर सकते हैं. मैं अगले पोस्ट में उन लोगों को कवर करेंगे.